color-scheme プロパティ

最終更新：2026-09-13

color-scheme color-scheme プロパティ

color-scheme プロパティは、要素がどの配色スキーム（ライト/ダーク）をサポートしているかをブラウザに伝え、スクロールバーやフォーム要素などのネイティブコントロールをレンダリングする際に適切なデフォルト色を選択できるようにします。これはダークモード対応において重要なプロパティです。

カテゴリ
初期値	normal
継承	はい
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

color-scheme: normal | [ light | dark | <custom-ident> ]+ && only?;

⚙️ 値

値	タイプ	説明
`normal \| light \| dark \| only`	キーワード	サポートされる配色スキーム

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
color-scheme	✓ v79	✓ v12	✓ v52	✓ v10.1	✓ v44
すべての主要ブラウザーでサポート

ヒント： <html> または <body> に color-scheme: dark を設定すると、ブラウザがスクロールバーやフォームコントロールなどのネイティブ要素をダークスタイルで自動的にレンダリングするようになります。

ヒント： only は、要素が列挙されたスキームのみをサポートし、ブラウザが自動的に切り替えるのを止めることを意味します。light dark の組み合わせは、両方がサポートされることを意味します。

❓ よくある質問

Qcolor-scheme と prefers-color-scheme の違いは何ですか？

Aprefers-color-scheme は、ユーザーのシステムのライト/ダークの設定を検出し、どのスタイルシートを読み込むかを決定するメディアクエリです。color-scheme は、ページや要素がどのスキームをサポートしているかをブラウザに伝え、スクロールバーやフォームなどのネイティブコントロールのデフォルト色を選択できるようにします。実際には両者は連携して機能します。メディアクエリで独自の色をスタイル設定し、color-scheme でネイティブコントロールを同期させます。

Qcolor-scheme を設定した後、要素は自動的にダークになりますか？

Aいいえ、自分で書いた色は変更されません。スクロールバー、入力、ドロップダウンメニュー、プレースホルダなどのネイティブ UI のブラウザによるデフォルトレンダリングにのみ影響します。背景、テキスト、その他のカスタム色は引き続き手動で設定する必要があります。例えば、html { color-scheme: dark; background: #111; color: #eee; } とすることで、ダークページが完全にレンダリングされます。

QCSS で color-scheme プロパティの only キーワードはどう使いますか？

Aonly は、列挙されたスキームのみをサポートし、自動切り替えを行わないことを意味します。例えば、color-scheme: only dark とすると、システムがライトモードの場合でもネイティブコントロールを常にダークでレンダリングするよう強制します。color-scheme: light dark は両方がサポートされ、システムに従うことを意味します。only はブランド向けやコンテンツ作成系のページに適しています。デフォルトの normal はユーザーエージェントとシステム設定に従います。

Qcolor-scheme と meta の theme-color の違いは何ですか？

Atheme-color は、ブラウザの UI シェル（モバイルのアドレスバーやウィンドウのテーマ色）の色を制御する HTML の meta タグです。color-scheme は、ページ内のネイティブコントロールのライト/ダークのレンダリングを制御する CSS プロパティです。対象とする層は異なります。一方はブラウザの外枠を管理し、もう一方はページのコンテンツを管理します。ダークモードを構築する際は、内外一貫した見た目にするために両方を設定できます。