Appearance module exposes information about the user's appearance preferences, such as their preferred color scheme (light or dark).
The color scheme preference will map to the user's Light or Dark theme preference on Android 10 (API level 29) devices and higher.
The color scheme preference will map to the user's Light or Dark Mode preference on iOS 13 devices and higher.
You can use the
Appearance module to determine if the user prefers a dark color scheme:
Although the color scheme is available immediately, this may change (e.g. scheduled color scheme change at sunrise or sunset). Any rendering logic or styles that depend on the user preferred color scheme should try to call this function on every render, rather than caching the value. For example, you may use the
useColorScheme React hook as it provides and subscribes to color scheme updates, or you may use inline styles rather than setting a value in a
Indicates the current user preferred color scheme. The value may be updated later, either through direct user action (e.g. theme selection in device settings) or on a schedule (e.g. light and dark themes that follow the day/night cycle).
Supported color schemes:
light: The user prefers a light color theme.
dark: The user prefers a dark color theme.
- null: The user has not indicated a preferred color theme.
getColorScheme()will always return
lightwhen debugging with Chrome.
Add an event handler that is fired when appearance preferences change.
Remove an event handler.