# @media (prefers-color-scheme)

> ユーザーのシステム設定がライトモードかダークモードかを検出するメディアクエリです。OSのテーマ設定に合わせてサイトの配色を自動で切り替えたい場合に使用します。

- カテゴリ: レスポンシブ・関数
- URL: https://www.css-dictionary.com/property/prefers-color-scheme/

## 構文

```css
@media (prefers-color-scheme: light | dark)
```

## Tailwindでは

- バリアント: `dark:` を先頭に付けて使う
- `dark:bg-gray-900` → @media (prefers-color-scheme: dark) { background-color: ... }
- 補足: v4のdark:は既定でprefers-color-scheme連動。クラス切り替え式（.darkを親に付ける）にするには@custom-variantで上書きする。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 76+ / Firefox 67+ / Safari 12.1+ / Edge 79+

## コード例

### 例1: ダークモード時のスタイル

```css
@media (prefers-color-scheme: dark) { body { background: black; } }
```

### 例2: ライトモード時のスタイル

```css
@media (prefers-color-scheme: light) { body { background: white; } }
```

## TIPS

OSやブラウザのテーマ設定を自動検出

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

prefers-color-schemeが検知するのはOS/ブラウザの設定のみで、サイト内の手動テーマ切替ボタンは別途仕組み（クラス切替+保存）が必要です。AIは「メディアクエリだけでテーマ切替ボタンも実現できる」かのような混同をすることがあります。現在はlight-dark()+color-schemeの上書きで手動切替も簡潔に書けます。

## AIへの依頼文例

- OS設定追従+手動切替（3択: ライト/ダーク/自動）のテーマ機能を、light-dark()を軸に設計して

## 関連プロパティ

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