CSS変数によるダークモードテーマシステム
CSSカスタムプロパティを使用して、@media prefers-color-schemeとクラスベースの切り替えで完全なライト/ダークテーマトグルを構築します。
詳細な説明
ダークモードテーマシステムの構築
モダンなWebアプリにはライトとダークの両方のテーマが必要です。CSSカスタムプロパティを使えばこれは簡単です：ライトパレットを:rootで定義し、ダークコンテキストでオーバーライドすれば、コンポーネントコードに触れることなくUI全体が更新されます。
2つのアプローチ
1. メディアクエリ（OS設定）
:root {
--bg: #ffffff;
--text: #18181b;
--surface: #f4f4f5;
--border: #e4e4e7;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0a0a0b;
--text: #fafafa;
--surface: #141415;
--border: #27272a;
}
}
2. クラストグル（手動切り替え）
:root {
--bg: #ffffff;
--text: #18181b;
}
.dark {
--bg: #0a0a0b;
--text: #fafafa;
}
正しい方法の選択
メディアクエリのアプローチはJavaScriptなしでユーザーのOS設定を自動的に尊重します。クラストグルのアプローチは小さなスクリプトが必要ですが、ユーザーに明示的な制御を与え、ブロッキングスクリプトやCookieと組み合わせた場合に誤ったテーマのフラッシュ（FOIT）の問題を回避します。
両方の組み合わせ
多くのフレームワーク（next-themesなど）は両方を組み合わせます：OS設定をデフォルトとして読み取り、ユーザーがオーバーライドでき、選択を永続化します。CSS構造は同じで、ダークオーバーライドをトリガーするラッパーを切り替えるだけです。
スタイル未適用テーマのフラッシュ回避
<head>に小さなブロッキング<script>を配置して、ブラウザが描画する前にlocalStorageから保存された設定を読み取り、.darkクラスを追加します。これにより、ダークオーバーライドが非同期でロードされる際に発生する白いフラッシュを防ぎます。
テスト
両方のテーマをWCAGコントラスト要件に対してテストしてください。ライトモードでAAを満たすカラーも、コントラスト比を再計算せずに単純に反転するとダークモードで失敗する場合があります。
ユースケース
OSレベルの設定検出とユーザー制御のトグルの両方をサポートし、コンポーネントレベルのスタイル変更なしで堅牢なライト/ダークテーマシステムが必要なWebアプリケーション。