ライトモード用とダークモード用の2色を1行で指定できるCSS関数です。メディアクエリで変数を二重定義する従来のダークモード実装を大幅に簡潔にできます。使用にはcolor-scheme: light darkの指定が必須です。
light-dark(<light-color>, <dark-color>):root {
color-scheme: light dark;
}
body {
color: light-dark(#333, #eee);
background: light-dark(#fff, #1a1a1a);
}ライト/ダーク両対応の文字色・背景色を1行ずつで定義
:root {
color-scheme: light dark;
--surface: light-dark(#f8f9fa, #202124);
--text: light-dark(#212529, #e8eaed);
}
.card {
background: var(--surface);
color: var(--text);
}CSS変数と組み合わせてテーマトークンを定義
手動のテーマ切替ボタンと共存させる場合は、htmlにcolor-scheme: lightまたはdarkを上書きすればlight-dark()の結果も追従します。@media (prefers-color-scheme)による二重定義より保守が圧倒的に楽です。
color-scheme: light darkの指定を忘れると常にライト側の色が使われます。また色以外の値（サイズや画像URL）には使えません。色以外を切り替えたい場合は従来のメディアクエリやクラス切替を使います。
AIはダークモード実装に「@media (prefers-color-scheme: dark)で変数を再定義する」冗長パターンを提案しがちですが、2024年以降はlight-dark()で1行に集約できます。AIが生成したlight-dark()が効かない場合、ほぼ確実にcolor-scheme: light darkの指定漏れです。また色以外の値に使おうとする誤生成にも注意してください。
このサイトのダークモード対応を、@mediaの二重定義ではなくlight-dark()とcolor-schemeで書き直して
ライト/ダーク対応のデザイントークン（背景・文字・ボーダー各3階調）をlight-dark()とCSS変数で設計して
手動テーマ切替ボタン（ライト/ダーク/システム準拠の3択）をlight-dark()ベースのCSSと最小限のJSで実装して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。