ユーザー操作
color-scheme
color-scheme は、要素を明るい配色と暗い配色のどちらで描けるかをブラウザに伝えます。チェックボックスや入力欄などの部品、スクロールバー、Canvas のようなシステムカラーが、その配色に合わせて描かれます。
構文
normal | [ light | dark | <custom-ident> ]+ && only?プレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
background-color: Canvas;
color: CanvasText;
color-scheme: dark;
}コントロール
color-schemedark
ブラウザに配色を変えさせない (only)
解説
変わるのはブラウザが決める色だけ
暗い配色にすると、フォームの部品やスクロールバーが暗い見た目になり、Canvas（地の色）や CanvasText（文字の色）のようなシステムカラーも暗い配色の色になります。自分で書いた色（background: #fff など）はそのままです。このページのプレビューでは、箱の地と文字をシステムカラーにしているので、部品と一緒に切り替わります。
値
normal：初期値です。ページ全体の配色に従います。ページの配色は<meta name="color-scheme">で決まり、無ければ明るい配色です。light/dark：明るい配色、暗い配色で描きます。light dark：両方に対応していると伝え、OS などで選ばれた方（prefers-color-scheme）で描きます。only：ほかの値と一緒に書き、ブラウザが配色を勝手に変えることを禁じます。Chrome の自動ダークモードのように、明るいページを暗く描き直す機能を止めたいときにonly lightと書きます。
ページ全体を暗い配色に対応させる
:root { color-scheme: light dark; } と書くと、ページの地の色や文字の色も OS の設定に合わせて切り替わります。CSS を読み込む前の一瞬が白く光らないよう、HTML に <meta name="color-scheme" content="light dark"> も書いておくと確実です。
気をつけること
- 継承するので、書いた要素の中の部品すべてに効きます。
light-dark(#ffffff, #111827)は、その要素の配色が明るいか暗いかで 2 つの色を使い分ける関数です。color-schemeでlight darkを指定した所で使うと、自分で書く色も配色に合わせられます。- 構文には
<custom-ident>もありますが、将来の配色のために場所を空けてあるだけで、今は意味を持ちません。このページのコントロールでは扱っていません。