{
  "context": "This criteria evaluates how effectively the engineer uses React Native's appearance and theming APIs (useColorScheme hook and Appearance module) to build a theme-aware component that automatically adapts to system color scheme changes.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "useColorScheme Hook Usage",
      "description": "Uses the useColorScheme() hook to detect the current color scheme (light or dark mode). The hook should be properly imported from 'react-native' and called within the component to get the current theme.",
      "max_score": 30
    },
    {
      "name": "Dynamic Theme Application",
      "description": "Applies different styles based on the color scheme returned by useColorScheme(). This includes conditional logic (e.g., ternary operators, if statements, or conditional style objects) that selects light-theme styles when colorScheme is 'light' and dark-theme styles when colorScheme is 'dark'.",
      "max_score": 25
    },
    {
      "name": "Automatic Re-rendering",
      "description": "The component automatically re-renders when the system theme changes. This happens naturally when using the useColorScheme() hook as it's reactive to theme changes, causing the component to update without manual intervention.",
      "max_score": 20
    },
    {
      "name": "Appropriate Color Contrast",
      "description": "Implements appropriate color choices for both light and dark modes with sufficient contrast. Light mode should use light backgrounds with dark text, and dark mode should use dark backgrounds with light text, ensuring readability in both modes.",
      "max_score": 15
    },
    {
      "name": "Component Structure",
      "description": "Creates the required component structure as specified: container view, header with 'Settings' text, and at least three setting items with distinct backgrounds. Uses appropriate React Native components (View, Text, etc.).",
      "max_score": 10
    }
  ]
}