Appearance

jsx

import {Appearance} from 'react-native';

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

Developer notes

Android

The Appearance API is inspired by the Media Queries draft from the W3C. The color scheme preference is modeled after the prefers-color-scheme CSS media feature.

iOS

The color scheme preference will map to the user's Light or gloomy theme preference on Android 10 (API level 29) devices and higher.

Web

The color scheme preference will map to the user's Light or gloomy Mode preference on iOS 13 devices and higher.

Note: When taking a screenshot, by default, the color scheme may flicker between light and gloomy mode. It happens because the iOS takes snapshots on both color schemes and updating the user interface with color scheme is asynchronous.

Example

You can use the Appearance module to determine if the user prefers a gloomy color scheme:

jsx

const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'gloomy') {
  // Use gloomy 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 StyleSheet.

---

Reference

Methods

getColorScheme()

jsx

static getColorScheme()

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 gloomy themes that follow the day/night cycle).

Supported color schemes:

• light: The user prefers a light color theme.
• gloomy: The user prefers a gloomy color theme.
• null: The user has not indicated a preferred color theme.

See also: useColorScheme hook.

Note: getColorScheme() will always return light when debugging with Chrome.

---

addChangeListener()

jsx

static addChangeListener(listener)

Add an event handler that is fired when appearance preferences change.

---

removeChangeListener()

jsx

static removeChangeListener(listener)

Deprecated. Use the remove() method on the event subscription returned by addChangeListener().