システムのカラースキームの検出

prefers-color-scheme CSS メディアクエリは、ユーザーがオペレーティングシステムでダークテーマとライトテーマのどちらを使用するよう設定しているかを検出します。dark と light の 2 つの値を受け取ります。この設定はブラウザではなく、システム設定で OS レベルに設定されます。

@media (prefers-color-scheme: dark) { ... } を使用すると、CSS だけでダークスタイルを適用できます。このブロック内で色、背景、境界線をダークパレットに合わせて上書きします。この方法では JavaScript は不要で、React がマウントされる前でも機能します。

JavaScript では、window.matchMedia('(prefers-color-scheme: dark)') が MediaQueryList オブジェクトを返します。これを使うと、React フックやイベントハンドラー内で現在のシステム設定をプログラムから読み取れます。これは CSS メディアクエリと JavaScript のロジックをつなぐ橋渡しとなります。

MediaQueryList オブジェクトには、boolean 値を返す matches プロパティがあります。matches が true ならシステムはダークモードで、false ならライトモードです。通常はマウント時に 1 回読み取り、テーマの状態を初期化します。

ユーザーはいつでも OS のカラースキームを変更できます。動的に対応するには、mediaQuery.addEventListener('change', handler) を呼び出します。handler は更新された MediaQueryListEvent を受け取ります。イベントオブジェクトには、新しい設定を反映した matches boolean も含まれます。

すっきりした方法は、useSyncExternalStore を使用してカスタムフックを構築することです。このフックは mediaQuery.addEventListener を購読し、mediaQuery.matches を返すスナップショット関数を提供します。これにより、手動で状態を管理しなくても、外部のブラウザ API とフックの状態を同期できます。

コンポーネントのマウントが解除されるときは、メモリリークを防ぐためにイベントリスナーを削除する必要があります。useEffect のクリーンアップで mediaQuery.removeEventListener('change', handler) を呼び出します。useSyncExternalStore を使用する場合、subscribe 関数は同じ処理を行う購読解除関数を返す必要があります。

システム設定とは、OS が報告する設定のことです。しかしユーザーは、OS がダークモードでもアプリはライトモードにするなど、アプリのテーマを独立して上書きしたい場合があります。アーキテクチャでは、システムのデフォルト設定と、localStorage に保存する明示的なユーザー設定を区別する必要があります。

Chrome DevTools では、OS の設定を変更せずにカラースキームの設定をエミュレートできます。DevTools を開き、Rendering タブに移動して、「Emulate CSS media feature prefers-color-scheme」ドロップダウンを探します。開発中に両方のテーマをすばやくテストするうえで非常に役立ちます。

優れたダークモード実装では、システム設定をデフォルトの開始点として読み取り、すぐに適用します。これにより、ユーザーのアクセシビリティ設定を尊重できます。アプリでユーザーが明示的にテーマを切り替えた後にだけ、別の上書き設定を保存して使用します。

サーバー上には window.matchMedia が存在しません。サーバーでレンダリングする場合は、matchMedia を呼び出す前に typeof window !== 'undefined' で確認します。SSR アプリでは、ハイドレーションの不一致を避けるため、代わりに Cookie または HTTP ヘッダーからユーザー設定を読み取ります。

MediaQueryList オブジェクトのどのプロパティで、メディアクエリが現在一致しているかどうかを確認できますか。

prefers-color-scheme メディアクエリを使用すると、CSS と JavaScript の両方で OS のカラープリファレンスを取得できます。window.matchMedia で設定の読み取りと変更の監視を行い、イベントリスナーは必ずクリーンアップします。また、システムのデフォルト設定とユーザーによる上書きを区別します。Chrome DevTools のエミュレーションを使うと、両方のテーマをすばやくテストできます。