メインコンテンツにスキップ

Appearance

import {Appearance} from 'react-native';

Appearance モジュールは、ユーザーの外観設定（ライトモードまたはダークモードなどの好みのカラースキーム）に関する情報を公開します。

開発者向けメモ​

Appearance API は、W3C の メディアクエリドラフト に触発されています。カラースキームの設定は、prefers-color-scheme CSS メディア機能 をモデルとしています。

例​

Appearance モジュールを使用して、ユーザーがダークカラースキームを好むかどうかを判断できます。

const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
  // Use dark color scheme
}

カラースキームはすぐに利用できますが、これは後で変更される可能性があります（日の出や日没時のスケジュールされたカラースキームの変更など）。ユーザーが好むカラースキームに依存するレンダリングロジックまたはスタイルは、値をキャッシュするのではなく、レンダリングごとにこの関数を呼び出そうとする必要があります。たとえば、カラースキームの更新を提供および購読する useColorScheme React フックを使用するか、StyleSheet に値を設定するのではなく、インラインスタイルを使用できます。

リファレンス

メソッド​

getColorScheme()​

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

現在ユーザーが好むカラースキームを示します。値は、ユーザーの直接操作（デバイス設定でのテーマ選択、または `setColorScheme` を介したアプリケーションレベルで選択されたユーザーインターフェーススタイルなど）、またはスケジュール（昼夜サイクルに従うライトテーマとダークテーマなど）によって後で更新される場合があります。

サポートされているカラースキーム

  • light：ユーザーはライトカラースキームを好みます。
  • dark：ユーザーはダークカラースキームを好みます。
  • null：ユーザーは好みのカラースキームを示していません。

useColorScheme フックも参照してください。

注：Chrome でデバッグする場合、getColorScheme() は常に `light` を返します。

setColorScheme()​

static setColorScheme('light' | 'dark' | null): void;

アプリケーションに常にライトまたはダークのインターフェーススタイルを採用させるようにします。デフォルト値は `null` で、アプリケーションはシステムのインターフェーススタイルを継承します。異なる値を割り当てると、新しいスタイルはアプリケーションとアプリケーション内のすべてのネイティブ要素（アラート、ピッカーなど）に適用されます。

サポートされているカラースキーム

  • light：ライトユーザーインターフェーススタイルを適用します。
  • dark：ダークユーザーインターフェーススタイルを適用します。
  • null：システムのインターフェーススタイルに従います。

注：この変更は、システムで選択されたインターフェーススタイルや他のアプリケーションで設定されたスタイルには影響しません。

addChangeListener()​

static addChangeListener(
  listener: (preferences: {colorScheme: 'light' | 'dark' | null}) => void,
): NativeEventSubscription;

外観設定が変更されたときに発生するイベントハンドラーを追加します。