CSS3

プロパティ

color-scheme

→●、mdn

¶色の配色の選択。

prefers-color-scheme 媒体特能は、［利用者が選好した色スキームにページ内の色を順応させる］ことを作者に許容するが、ページを成す各部には、作者の制御下にないものも多くある（フォームコントロール、スクロールバー、等々）。color-scheme プロパティは、［要素は、どの色スキームで描画されるものと設計されたか］を指示することを許容する。その値は、利用者選好と折衝され、その結果の 使用色スキーム は、次に挙げるものなどに影響する（§ 使用色スキームの効果 を見よ）：

注記： 色スキーム サポートが存在する前に著作されたページは数多くあるので、ユーザー エージェントは、要素内で利用される色を自身の制御の下で自動的に順応することはできない ― そうすると、周囲のページとの色コントラストが読み取り不能になりかねないので。

normal

次を指示する：

当の要素は、色スキームをまったく自覚しないので、ブラウザの既定の色スキームで描画されるべきである

<INPUT style="color-scheme:normal" type=text value="テスト"><BR>
<INPUT style="color-scheme:normal" type=radio>
<INPUT style="color-scheme:normal" type=checkbox><BR>

[light | dark | <custom-ident>]+

<INPUT style="color-scheme:light dark" type=text value="テスト"><BR>
<INPUT style="color-scheme:light dark" type=radio>
<INPUT style="color-scheme:light dark" type=checkbox><BR>

light

次を指示する：

ページは、当の要素が明るい色スキームで描画されていても取り扱える

<INPUT style="color-scheme:light" type=text value="テスト"><BR>
<INPUT style="color-scheme:light" type=radio>
<INPUT style="color-scheme:light" type=checkbox><BR>

dark

次を指示する：

ページは、当の要素が暗い色スキームで描画されていても取り扱える

<INPUT style="color-scheme:dark" type=text value="テスト"><BR>
<INPUT style="color-scheme:dark" type=radio>
<INPUT style="color-scheme:dark" type=checkbox><BR>

<custom-ident> ○ mdn

<custom-ident> 値は無意味であり、将来の互換性を得るために限り存在する ― 将来に色スキームが追加されても、旧来のユーザー エージェントにおいて color-scheme 宣言が無効化されないようにするため。ユーザー エージェントは、どの <custom-ident> 値も，意味があるとは解釈しないものとする ― 認識される追加の色スキームは、このプロパティの文法に明示的に追加されなければならない。

注記： 混同を避けるため、著作用のチュートリアルや文献の素材からは <custom-ident> を省略するべきである。

キーワード［normal、light、dark］は、このプロパティにおいては、妥当な <custom-ident> でない。

<INPUT style="color-scheme:pink" type=text value="テスト"><BR>
<INPUT style="color-scheme:pink" type=radio>
<INPUT style="color-scheme:pink" type=checkbox><BR>

¶

注記： ［明るい色スキーム／暗い色スキーム］は、特定の色パレットではない。例えば、［stark black-on-white、sepia dark-on-tan］両スキームとも、明るい色スキームと見なされる。ある特定の［前景色／背景色］を確保するためには、明示的に指定される必要がある。

要素の使用色スキームは、次に従って決定される：

1. リストされた色スキームのいずれかが［ prefers-color-scheme 媒体特能【の実値】にて指示される、利用者が選好した色スキーム ］に一致していて、ユーザー エージェントはそれをサポートする場合、それになる。
2. 他の場合、リストされた色スキームにユーザー エージェントがサポートするものが在るならば、それらのうち最初のものになる。
3. >他の場合、ブラウザの既定（normal のときと同じ）になる。

注記： ユーザー エージェントには、ある特定の色スキームをサポートするよう要求されてはいない。なので、単独のキーワードを利用して要求される色スキームを指示しても ― 例： color-scheme: dark ― 要素の描画に何か効果を及ぼすことは保証されない。

:root {
  color-scheme: light dark;
}

注記： [HTML] は、<META> 要素用のメタ データ名として color-scheme を指定する。それは、非 CSS 呈示用ヒントとして、根要素上の color-scheme を設定するために利用できる。

注記： color-scheme にあてがう値は、light light のようにキーワードを繰り返しても妥当であるが、その効果は 1 個だけのときと同じになる。

テスト