# light-dark()

> ライトモード用とダークモード用の2色を1行で指定できるCSS関数です。メディアクエリで変数を二重定義する従来のダークモード実装を大幅に簡潔にできます。使用にはcolor-scheme: light darkの指定が必須です。

- カテゴリ: レスポンシブ・関数
- URL: https://www.css-dictionary.com/property/light-dark/
- MDN: https://developer.mozilla.org/ja/docs/Web/CSS/color_value/light-dark

## 構文

```css
light-dark(<light-color>, <dark-color>)
```

## ブラウザ対応

- Baseline 新しく利用可能（2024年5月に全主要ブラウザ対応）
- Chrome 123+ / Firefox 120+ / Safari 17.5+ / Edge 123+

## コード例

### 例1: ライト/ダーク両対応の文字色・背景色を1行ずつで定義

```css
:root {
  color-scheme: light dark;
}

body {
  color: light-dark(#333, #eee);
  background: light-dark(#fff, #1a1a1a);
}
```

### 例2: CSS変数と組み合わせてテーマトークンを定義

```css
:root {
  color-scheme: light dark;
  --surface: light-dark(#f8f9fa, #202124);
  --text: light-dark(#212529, #e8eaed);
}

.card {
  background: var(--surface);
  color: var(--text);
}
```

## TIPS

手動のテーマ切替ボタンと共存させる場合は、htmlにcolor-scheme: lightまたはdarkを上書きすればlight-dark()の結果も追従します。@media (prefers-color-scheme)による二重定義より保守が圧倒的に楽です。

## よくある間違い

color-scheme: light darkの指定を忘れると常にライト側の色が使われます。また色以外の値（サイズや画像URL）には使えません。色以外を切り替えたい場合は従来のメディアクエリやクラス切替を使います。

## AIがよく間違えるポイント

AIはダークモード実装に「@media (prefers-color-scheme: dark)で変数を再定義する」冗長パターンを提案しがちですが、2024年以降はlight-dark()で1行に集約できます。AIが生成したlight-dark()が効かない場合、ほぼ確実にcolor-scheme: light darkの指定漏れです。また色以外の値に使おうとする誤生成にも注意してください。

## AIへの依頼文例

- このサイトのダークモード対応を、@mediaの二重定義ではなくlight-dark()とcolor-schemeで書き直して
- ライト/ダーク対応のデザイントークン（背景・文字・ボーダー各3階調）をlight-dark()とCSS変数で設計して
- 手動テーマ切替ボタン（ライト/ダーク/システム準拠の3択）をlight-dark()ベースのCSSと最小限のJSで実装して

## 関連プロパティ

- [color-scheme](https://www.css-dictionary.com/property/color-scheme.md)
- [prefers-color-scheme](https://www.css-dictionary.com/property/prefers-color-scheme.md)
- [css-custom-properties](https://www.css-dictionary.com/property/css-custom-properties.md)
- [color-mix](https://www.css-dictionary.com/property/color-mix.md)