“color-scheme”プロパティ:対応するカラー・スキーム

概要

“color-scheme”プロパティは要素が対応するカラー・スキームを示すプロパティです。

メディア・クエリの“prefers-color-scheme”メディア・フィーチャーではフォーム・コントロールなどのユーザー・エージェントの影響下にある要素のカラー・スキームを変更することができませんが、“color-scheme”プロパティを使用することで要素がどのカラー・スキームで描画されるべきなのかを示すことができます。

ルート要素に適用することで文書全体のカラー・スキームを示すことができます。個別の要素に適用することで一部だけを別のカラー・スキームにすることもできます。

“color-scheme”プロパティで示されたカラー・スキームはユーザーが望むカラー・スキームと突き合わされ、実際に使用されるカラー・スキームが決定されます。

“meta”要素で同様の指定を行うことでCSSの読み込みを待たずにフォーム・コントロールなどのユーザー・エージェントの影響下にある要素や背景色などを望ましいカラー・スキームに合わせた色で表示することができます。“meta”要素による指定は“表現上のヒント”として扱われ、“color-scheme”プロパティによって上書きできます。

サンプルコード

:root { color-scheme: light dark;}


値

“normal”キーワードは単独で使用し、“light”、“dark”や“only”キーワードとの併用はできません。

“light”キーワード、“dark”キーワードは必要なものをホワイトスペースで区切って記述します。

“only”キーワードは必要であれば“light”キーワードと“dark”キーワードの前もしくは後にホワイトスペースを挟んで1個だけ記述します。

仕様書

定義されている仕様書

color-scheme

normal
light
dark
only

デフォルトのカラー・スキーム

:root { color-scheme: normal;}


表示サンプルはリンク先を参照

明るいカラー・スキーム

:root { color-scheme: light;}


表示サンプルはリンク先を参照

暗いカラー・スキーム

:root { color-scheme: dark;}


表示サンプルはリンク先を参照

明るいカラー・スキームと暗いカラー・スキーム

:root { color-scheme: light dark;}


表示サンプルはリンク先を参照

カラー・スキームの上書を禁止する

:root { color-scheme: light only;}


表示サンプルはリンク先を参照

:root { color-scheme: dark only;}


表示サンプルはリンク先を参照