Skip to main content
Version: Next

useColorScheme

tsx
import {useColorScheme} from 'react-native';

The useColorScheme React hook provides and subscribes to color scheme updates from the Appearance module. The return value indicates the active color scheme. The value may be updated later, either through direct user action (e.g. theme selection in device settings or application-level selected user interface style via setColorScheme) or on a schedule (e.g. light and dark themes that follow the day/night cycle).

Return values​

  • 'light': The light color scheme is applied.
  • 'dark': The dark color scheme is applied.
  • 'unspecified': Never returned (incorrectly typed).
  • null: May be returned if the native Appearance module is not available.

Example​

You can find a complete example that demonstrates the use of this hook alongside a React context to add support for light and dark themes to your application in AppearanceExample.js.