color-scheme property
color-scheme は CSS のプロパティで、要素がどのような配色で快適に表示されるかを示すことができます。ユーザーエージェントは、使用されている配色に合わせて、 UI クロームの次の側面を変更します。
キャンバス表面の色。
スクロールバーやその他の操作 UI の既定の色。
フォームコントロールの既定の色。
その他のブラウザーで指定された UI の既定の色（たとえば、「スペルチェック」のアンダーラインなど）。
要素の作成者は、prefers-color-scheme メディア特性を使用して、残りの要素の色構成に対応する必要があります。
オペレーティングシステムの配色の一般的な選択肢は、「ライト」と「ダーク」、または「昼モード」と「夜モード」です。ユーザーがこれらの配色のいずれかを選択すると、 OS はユーザーインターフェイスを調整します。これには、フォームコントロール、スクロールバー、および CSS システムカラーの使用値が含まれます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 81 | 81 | 96 | 13 | 81 | 13 | |
dark | 81 | 81 | 96 | 13 | 81 | 13 |
light | 81 | 81 | 96 | 13 | 81 | 13 |
normal | 81 | 81 | 96 | 13 | 81 | 13 |
only 「のみ」のキーワード | 98 | 98 | 96 | 13 | 98 | 13 |
| その他 | ||||||
| color-scheme は meta 要素の name 属性の値で、ユーザーエージェントがページに使用すべき提案としての配色を示します。 指定した場合、配色は 要素の content 属性に、 CSS の有効な color-scheme 値を使用して定義します。 | 81 | 81 | 96 | 12.1 | 81 | 12.2 |
注釈 1件
削除済み
- このバージョンで機能が削除されました (85)
注釈 1件
削除済み
- このバージョンで機能が削除されました (85)
注釈 1件
削除済み
- このバージョンで機能が削除されました (85)
基本構文
HTML
/* Declare support for both light and dark modes */
:root {
color-scheme: light dark;
}
/* Set specific elements to light mode only */
.always-light {
color-scheme: light;
}
/* Use in conjunction with meta tags */
/* <meta name="color-scheme" content="light dark"> */ライブデモ
実務での使いどころ
-
ダークモード自動対応
フォーム要素やスクロールバーがシステム設定に応じて自動でダークモードに切り替わる。
-
初期描画のちらつき防止
meta タグで事前にカラースキームを宣言し、CSS 読み込み前の白画面フラッシュを防止する。
注意点
- color-scheme だけではカスタムスタイルは切り替わらない。独自のダークモードスタイルは prefers-color-scheme メディアクエリで別途定義する必要がある。
アクセシビリティ
- ユーザーのシステム設定を尊重したカラースキームの提供は、まぶしさの軽減やバッテリー節約に貢献し、アクセシビリティの基本である。