Theme-Aware Settings Screen

Build a settings screen component that adapts its appearance based on the device's color scheme (light or dark mode). The component should display user settings with appropriate styling that automatically updates when the system theme changes.

Requirements

Theme Detection and Adaptation

The component must detect the current system color scheme and apply appropriate colors:

• Background colors should adapt to the theme (light background for light mode, dark background for dark mode)
• Text colors should have sufficient contrast in both themes
• The component must re-render automatically when the user changes their system theme
• All theme-dependent colors should update without requiring a manual refresh

Component Structure

Create a settings screen with the following elements:

• A container view that fills the screen
• A header displaying "Settings"
• At least three setting items, each showing a label and a value
• Each setting item should have a distinct background that differs from the main container

Color Behavior

The color scheme should follow these patterns:

• Light mode: Use light backgrounds (#FFFFFF or similar) with dark text (#000000 or similar)
• Dark mode: Use dark backgrounds (#000000 or similar) with light text (#FFFFFF or similar)
• Setting items should have slightly different background colors than the main container to show visual separation

Test Cases

• When the device is in light mode, the background is light colored and text is dark colored @test
• When the device is in dark mode, the background is dark colored and text is light colored @test
• When the system theme changes from light to dark, the component updates its colors automatically @test

Implementation

@generates

API

/**
 * A settings screen component that adapts to system color scheme
 * @returns {React.Element} The themed settings screen component
 */
export default function ThemeSettings() {
  // IMPLEMENTATION HERE
}

Dependencies { .dependencies }

react-native { .dependency }

Provides the mobile application framework with theme detection capabilities