テーマ切り替えのためのCSS変数

:root に定義した CSS カスタムプロパティ（変数）は、スタイルシート全体でグローバルに使用できます。背景、テキストの色、サーフェス、境界線など、完全なカラーパレットを一度定義して、どこからでも参照します。信頼できる唯一の情報源を作ることで、テーマの切り替えが簡単になります。

data-theme="dark" 属性が document.documentElement に設定されると、[data-theme='dark'] のような CSS セレクターがルート変数をダーク用の値で上書きします。コンポーネントは var(--color-bg) を参照するだけで、コードを変更しなくても新しい値を自動的に取得できます。

最低限、--color-bg（ページの背景）、--color-text（主要なテキスト）、--color-primary（ブランドカラー）、--color-surface（カードやパネルの背景）、--color-border（区切り線）を定義します。一貫したトークンのセットにより、コンポーネントに場当たり的な色の値が現れるのを防げます。

コンポーネントの CSS では、background: var(--color-bg) や color: var(--color-text) のように変数を参照します。var(--color-bg, #ffffff) のようにフォールバック値を指定することもできます。ブラウザは描画時に変数を解決するため、1 つのクラスでライトテーマとダークテーマの両方に対応できます。

:root セレクターに transition: background-color 200ms, color 200ms を追加します。data-theme 属性が変わると、CSS 変数を使用するすべての要素が新しい値へ同時にアニメーションします。これにより、JavaScript でアニメーションコードを書かなくても洗練された印象になります。

テーマの管理には、JavaScript からインラインスタイルを設定するよりも CSS 変数を使用するほうが優れています。ブラウザがスタイルの再計算をネイティブに処理するため、テーマを使用する子コンポーネントごとに React の再レンダリングが発生することはなく、CSS のカスケードが継承も自動的に処理します。JavaScript で必要なのは、ルート要素の 1 つの属性を切り替えることだけです。

CSS 変数と @media (prefers-color-scheme: dark) クエリを組み合わせて、CSS だけのフォールバックを実装できます。data-theme セレクターに加えて、またはその代わりに、メディアクエリ内でダーク用の上書きを定義します。これにより、JavaScript がまだ実行されていない場合でもダークモードが機能します。

最も堅牢な方法は、両方の仕組みを組み合わせることです。@media クエリで OS のデフォルト設定を提供し、data-theme 属性で JavaScript からユーザーによる上書きを可能にします。属性が存在する場合は詳細度によってそちらが優先され、存在しない場合はメディアクエリが適用されます。

ダークな背景で見栄えが悪くなる画像には、source media="(prefers-color-scheme: dark)" 子要素を持つ HTML の picture 要素を使用します。ブラウザがダークモード用のバリエーションを自動的に選択します。CSS の SVG アイコンには、簡易的な近似として filter: invert(1) を使用できます。

CSS 変数は、:root ではなくコンポーネントのルート要素に定義することで、個々のコンポーネントにスコープを限定することもできます。これにより、ページの背景とは異なる独自の背景トークンを持つサイドバーなど、コンポーネントごとのテーマ設定が可能になります。それでもグローバルなテーマ切り替えに合わせて正しく切り替わります。

Chrome DevTools の Styles パネルには、解決済みの CSS 変数の値が表示されます。変数の参照をクリックすると、その定義に移動できます。これにより、任意の要素に正しいダーク用またはライト用のトークンが適用されているかを簡単に確認できます。パネル上で変数の値をその場で編集することもできます。

ドキュメント全体に適用するグローバルな CSS カスタムプロパティを定義するには、どの CSS セレクターを使用しますか。

:root の CSS カスタムプロパティにより、テーマ用のトークンを一元管理できます。html 要素の data-theme 属性を切り替えると、テーマをすぐに変更できます。CSS トランジションを追加して滑らかにアニメーションさせ、prefers-color-scheme メディアクエリを CSS だけのフォールバックとして使用し、コンポーネントごとの JS によるスタイル上書きは避けます。