Appearance

The Appearance module exposes information about the user’s appearance preferences, such as their preferred color scheme (light or dark).

TV relevance: Baseline React Native Web API. Use for theme adaptation on TV UIs the same way as standard web UIs.

import { Appearance } from 'react-native';

API

Static methods

addChangeListener (listener) => { remove: () => void }

Add an event handler that is called with {colorScheme: "dark" | "light"} when appearance preferences change. Returns a remove method used to remove the change listener.

getColorScheme () => ("dark" | "light")

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.