light-dark() function
light-dark() は color-scheme プロパティと連動し、ライトモードでは第1引数、ダークモードでは第2引数の色が使われる。prefers-color-scheme メディアクエリを使わずに、1箇所でライト/ダーク両方の色を定義できるため、カスタムプロパティのダークモード対応が格段にシンプルになる。
概要
light-dark() は color-scheme プロパティと連動し、ライトモードでは第1引数、ダークモードでは第2引数の色が使われる。prefers-color-scheme メディアクエリを使わずに、1箇所でライト/ダーク両方の色を定義できるため、カスタムプロパティのダークモード対応が格段にシンプルになる。
対応ブラウザ
デスクトップ
Chrome 123+
Edge 123+
Safari 17.5+
Firefox 120+
モバイル
Chrome Android 123+
Safari iOS 17.5+
Firefox Android 120+
基本構文
CSS
: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 など）には使えない。
フォールバック戦略
CSS
/* 非対応ブラウザ用フォールバック */
:root {
--bg: #ffffff;
--text: #1a1a2e;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #1a1a2e;
--text: #e0e0e0;
}
}アクセシビリティ
- ダークモードの色でも十分なコントラスト比を確保すること。ライトとダークの両方でコントラスト比を検証する。