2024年Chrome 123+/Safari 17.5対応。light-dark(white, black)+color-scheme property連携+Dark Mode CSS Native対応+メディアクエリ不要+CSS Custom Properties統合搭載。
CSS light-dark() functionは2024年Chrome 123+で正式採用された新CSS関数で、Light Mode/Dark Modeの色を1つの関数で記述する仕組み。light-dark(white, black) のようにデフォルト(Light)・ダーク両方の色を引数で指定し、ブラウザが自動的にユーザー設定(prefers-color-scheme)に応じた色を選択する。従来は@media (prefers-color-scheme: dark)メディアクエリで全ダーク色を別途記述する必要があり、コード重複と保守性の低さが問題だったが、light-dark() で大幅に簡素化される。color-scheme: light dark propertyとセットで使う必要があるため、両者の関係理解が運用の鍵。Chrome 123+/Edge 123+/Firefox 120+/Safari 17.5+で対応し、2026年5月時点でProduction採用にBlockerなし。Tailwind CSS 4.0(2024年12月)も dark:bg-X Variant のCSS生成で内部利用を開始。
color-scheme: light dark を設定要素以上で宣言--bg: light-dark(white, black) で命名色構築color-scheme: light で固定可能light-dark(red, calc(red * 0.5)) 等の動的計算light-dark(var(--color), oklch(from var(--color) calc(l - 0.5) c h))dark: Variant が内部でlight-dark()を活用、Bundle削減| 項目 | CSS light-dark() | @media (prefers-color-scheme) | CSS Variables(2-set) | Tailwind 4 dark: |
|---|
| 構文 | light-dark(L, D) | @media内全色記述 | 2セット定義+条件切替 | dark:utility class |
| color-scheme必須 | ○ | × | △ | ○ (Tailwind管理) |
| Bundle削減 | ○ | × (重複記述) | △ | ○ (Native活用) |
| Browser Support | Baseline 2024 | 全ブラウザ | 全ブラウザ | Tailwind依存 |
| User Override | × (OS設定のみ) | × (OS設定のみ) | ○ (JS切替可能) | ○ (class strategy) |
| 細粒度制御 | 要素別color-scheme | 全体メディアクエリ | 要素別class | utility単位 |
| 学習曲線 | 関数記法 | メディアクエリ | CSS変数 | Tailwindクラス |
/* 基本: ルートで color-scheme 設定 */
html {
color-scheme: light dark;
}
/* light-dark() で背景色 */
body {
background: light-dark(#ffffff, #1a1a1a);
color: light-dark(#000000, #f0f0f0);
}
/* CSS Custom Properties経由 */
:root {
--bg-primary: light-dark(white, #0f0f0f);
--text-primary: light-dark(#1a1a1a, #f5f5f5);
}
.card {
background: var(--bg-primary);
color: var(--text-primary);
}
/* Relative Color と併用(高度) */
:root {
--brand: oklch(70% 0.15 250);
--bg-card: light-dark(
oklch(from var(--brand) 0.95 0.05 h),
oklch(from var(--brand) 0.20 0.05 h)
);
}
/* 強制Light Mode(色固定) */
.always-light-section {
color-scheme: light;
background: light-dark(white, black); /* whiteのみ採用 */
}
dark: Variant の内部実装で活用CSS light-dark() functionはWeb開発者向けの新CSS関数で、jisaku.comのDark Mode実装(Tailwind CSS 4ベース)では内部で活用されている技術。jisaku.com Web Frontend(Next.js 16+TypeScript+Tailwind CSS 4)は2024年12月のTailwind 4.0アップグレードで、Dark Mode関連CSS生成効率が向上(light-dark()採用でBundle Size 5-10KB削減)。実装時は color-scheme: light dark をルート(html)で必ず宣言し、各要素では light-dark(L色, D色) を直接記述するか、CSS Custom Properties経由でテーマ色管理する。jisaku.comではTailwind 4 のutility classを使うため直接light-dark()記述は少ないが、カスタムCSS(記事Markdown内のコードブロック・引用等)で活用される。Browser Supportはbaseline 2024で問題なし、Internet Explorer非対応(EOL済み)。User Override(明示的Light/Dark選択)が必要な場合はクラスベース戦略(Tailwind 4の [data-theme="dark"])併用がベストプラクティス。Server-side Rendering(SSR)時の Flash of Unstyled Content(FOUC)対策として、HTML head に inline <script> でユーザー設定を即時適用する従来手法は、light-dark()でも引き続き必要。
@media (prefers-color-scheme: dark)との違い: メディアクエリは全色をDark Block内で再記述、light-dark()は1関数で両モード記述+Bundle削減。要素別の細粒度Dark Mode制御(color-scheme property)も light-dark()のみ可能。 Tailwind 4 dark: utilityとの違い: Tailwind dark:はutility class経由、light-dark()はCSS関数。両者は補完関係で、Tailwind 4内部で light-dark() を活用してBundle最小化を実現。
Q1: color-scheme propertyを設定しないと動かない？
A: そう。color-scheme: light dark を設定しないとブラウザがlight-dark()の動作を拒否し、デフォルト色(Light)のみ採用。html要素または:root に必須宣言。色対応する全要素のfar-most共通祖先で宣言推奨。
Q2: User Override(手動Light/Dark切替)はどう実装する？
A: light-dark()単体では不可、CSS Variables+JavaScript併用が必要。<html data-theme="dark" style="color-scheme: dark"> のようにdata-attribute+inline color-scheme経由で強制切替、CSS側は[data-theme="dark"] light-dark()で対応色設定。Tailwind 4のClass Strategy推奨。
Q3: CSS Relative Color と併用すると？
A: 強力。light-dark(oklch(70% 0.15 250), oklch(30% 0.15 250)) でブランドカラーの明度を Light/Dark で自動切替。oklch(from var(--brand) ...) を引数に取れば派生色構築も可能で、デザイントークンシステムの柔軟性が劇的向上。