CSS リファレンスマニュアル

CSS 属性

color-scheme 属性は、要素がどのオペレーティングシステムのカラースキーマを使用してレンダリングするかを示します。

オペレーティングシステムのカラースキーマの一般的な選択肢は「ライト」（浅色）と「ダーク」（暗色）、または「デイモード」（日間モード）と「ナイトモード」（夜間モード）です。

ページ全体をダークなカラースキーマに設定します：

:root {
  color-scheme: dark;
}

color-scheme: normal|light|dark|only light|only dark|light dark;

値	説明
normal	要素は、オペレーティングシステムのデフォルトのカラースキーマを使用してレンダリングできます
ライト	要素は、オペレーティングシステムのライトなカラースキーマを使用してレンダリングできます
ダーク	要素は、オペレーティングシステムのダークなカラースキーマを使用してレンダリングできます
only light	要素は、オペレーティングシステムのライトなカラースキーマのみを使用してレンダリングされるべきです。ブラウザは、この要素のカラースキーマをオーバーライドすることを禁止します。
only dark	要素は、オペレーティングシステムのダークなカラースキーマのみを使用してレンダリングされるべきです。ブラウザは、この要素のカラースキーマをオーバーライドすることを禁止します。
ライトダーク	要素は、オペレーティングシステムのライトまたはダークなカラースキーマを使用してレンダリングできます（ユーザーの設定によります）。

デフォルト値：	normal
継承性：	はい
バージョン：	CSS Color Adjustment Module レベル1
JavaScript文法：

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome	Edge	Firefox	Safari	Opera
81	81	96	13	68