as

Settings
Sign out
Notifications
Alexa
Amazonアプリストア
AWS
ドキュメント
Support
Contact Us
My Cases
開発
設計と開発
公開
リファレンス
サポート
アクセスいただきありがとうございます。こちらのページは現在英語のみのご用意となっております。順次日本語化を進めてまいりますので、ご理解のほどよろしくお願いいたします。

Appearance


import {Appearance} from 'react-native';

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

Developer notes

The color scheme preference will map to the user's Light Mode on Kepler.

Example

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


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


Reference

Methods

getColorScheme()


static getColorScheme(): 'light' | 'dark' | null;

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 application-level selected user interface style via setColorScheme) 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.

See also: useColorScheme hook.

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



Last updated: Sep 30, 2025