CSS light-dark() functionとは？（シーエスエスライトダークファンクション）意味・特徴をわかりやすく解説

Q: CSS light-dark() functionとは？

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生成で内部利用を開始。

主な特徴・仕組み

light-dark(light_color, dark_color): 引数2つで Light/Dark両方を指定
color-scheme property必須: color-scheme: light dark を設定要素以上で宣言
CSS Custom Properties統合: --bg: light-dark(white, black) で命名色構築
prefers-color-scheme自動連携: ユーザーOS Dark Mode設定を自動反映
詳細制御: 要素ごとに color-scheme: light で固定可能
CSS Variables Multi-Mode: テーマシステム構築の標準パターン
calc()併用可能: light-dark(red, calc(red * 0.5)) 等の動的計算
CSS Relative Color併用: light-dark(var(--color), oklch(from var(--color) calc(l - 0.5) c h))
ブラウザDOMRenderer段階で評価: JavaScript Runtime不要、Pure CSS
Browser Support: Chrome 123+ Edge 123+ Firefox 120+ Safari 17.5+ Baseline 2024
Tailwind 4対応: 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のみ採用 */
}

Chrome 123+ stable: 2024年3月リリース、フル機能対応
Safari 17.5+: 2024年5月リリース、Baseline到達
Firefox 120+: 2023年11月先行リリース、Stable動作
Tailwind CSS 4.0: 2024年12月公開、dark: Variant の内部実装で活用
競合機種: @media (prefers-color-scheme)(全ブラウザ対応)、CSS Variables 2-set、Tailwind 3 dark mode

自作PCでの選び方・注意点

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()でも引き続き必要。

よくある質問（FAQ）

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) ...) を引数に取れば派生色構築も可能で、デザイントークンシステムの柔軟性が劇的向上。

まとめ

CSS light-dark() function = 2024年Chrome 123+/Safari 17.5+ Baseline
light-dark(L, D) で1関数記述、color-scheme propertyとセット
@media (prefers-color-scheme)からの移行でBundle削減+保守性向上
CSS Custom Properties/Relative Color と併用でデザイントークン強化
Tailwind CSS 4.0 内部で活用、Dark Mode実装の最新標準

CSS light-dark() function（シーエスエスライトダークファンクション）

概要