# color-scheme

> 要素がどのカラースキーム（ライト/ダーク）で表示されるかを示します。ブラウザのフォーム要素などのデフォルトスタイルに影響します。

- カテゴリ: その他
- URL: https://www.css-dictionary.com/property/color-scheme/

## 構文

```css
color-scheme: normal | [ light | dark | <custom-ident> ]+
```

## Tailwindでは

- `scheme-light` → color-scheme: light
- `scheme-dark` → color-scheme: dark
- `scheme-light-dark` → color-scheme: light dark
- 補足: scheme-* はv4新設。フォーム部品やスクロールバーの配色をOSテーマに追従させる。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 81+ / Firefox 96+ / Safari 13+ / Edge 81+

## コード例

### 例1: ライト・ダーク両対応

```css
color-scheme: light dark;
```

### 例2: ダークモードのみ

```css
color-scheme: dark;
```

## TIPS

ブラウザのフォーム要素の外観も変わる

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

color-schemeはフォーム部品・スクロールバー・システム由来のUIをまとめてダーク対応させるプロパティで、light-dark()関数の前提条件でもあります。AIはダークモード実装でこれを飛ばし、スクロールバーだけ白いまま等の中途半端な結果を出しがちです。:root { color-scheme: light dark } が現代のダーク対応の起点です。

## AIへの依頼文例

- ダークモードでスクロールバーとフォーム部品だけ白いままの問題をcolor-schemeで解決して

## 関連プロパティ

- [prefers-color-scheme](https://www.css-dictionary.com/property/prefers-color-scheme.md)
- [light-dark](https://www.css-dictionary.com/property/light-dark.md)