light-dark() function
light-dark() は CSS の <color> 関数で、プロパティに 2 つの色を設定することができます。開発者が明るい配色または暗い配色を設定したか、ユーザーがライト色またはダーク色のテーマをリクエストしたか検出することによって、 2 つの色の選択肢のいずれかを返します。テーマ色を prefers-color-scheme メディア特性クエリーに入れる必要はありません。 ユーザーは OS の設定（ライトモードやダークモードなど）やユーザーエージェントの設定を通じて、環境設定を推奨することができます。 light-dark() 関数は、任意の <color> 値が受け入れられる場合に、 2 つの色の値を指定することができます。 CSS の light-dark() 色関数は、ユーザーの環境設定が light に設定されている場合、または何も設定されていない場合に最初の値を返し、ユーザーの環境設定が dark に設定されている場合に 2 つ目の値を返します。
light-dark() 色の関数の対応を有効にするには、color-scheme に light dark という値がなければなりません。ふつうはこれを :root 擬似クラスに設定します。
css
:root { color-scheme: light dark; } body { color: light-dark(#333b3c, #efefec); background-color: light-dark(#efedea, #223a2c); }
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 123 | 123 | 120 | 17.5 | 123 | 17.5 | |
基本構文
:root {
color-scheme: light dark;
--bg: light-dark(#ffffff, #1a1a2e);
--text: light-dark(#1a1a2e, #e0e0e0);
--border: light-dark(#d1d5db, #374151);
--accent: light-dark(#2563eb, #60a5fa);
}
body {
background-color: var(--bg);
color: var(--text);
}
.card {
border: 1px solid var(--border);
}ライブデモ
実務での使いどころ
-
シンプルなダークモード実装
メディアクエリを使わずに、カスタムプロパティの定義内でライト/ダーク両方の色を宣言できる。
-
コンポーネント単位の色定義
コンポーネントごとに独立したライト/ダーク色を light-dark() で定義し、テーマの管理を簡素化する。
注意点
- color-scheme プロパティが宣言されていないと機能しない。:root に color-scheme: light dark を必ず指定すること。
- light-dark() は color プロパティ値専用。色以外の値（padding や font-size など）には使えない。
フォールバック戦略
/* 非対応ブラウザ用フォールバック */
:root {
--bg: #ffffff;
--text: #1a1a2e;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #1a1a2e;
--text: #e0e0e0;
}
}アクセシビリティ
- ダークモードの色でも十分なコントラスト比を確保すること。ライトとダークの両方でコントラスト比を検証する。