color-scheme property
color-scheme: light dark を指定すると、ブラウザはシステムのダークモード設定に応じてフォーム要素・スクロールバー・デフォルトの背景色と前景色を自動的に切り替える。CSS カスタムプロパティやメディアクエリと組み合わせることで、完全なダークモード対応を効率的に実装できる。
概要
color-scheme: light dark を指定すると、ブラウザはシステムのダークモード設定に応じてフォーム要素・スクロールバー・デフォルトの背景色と前景色を自動的に切り替える。CSS カスタムプロパティやメディアクエリと組み合わせることで、完全なダークモード対応を効率的に実装できる。
対応ブラウザ
デスクトップ
Chrome 98+
Edge 98+
Safari 13+
Firefox 96+
モバイル
Chrome Android 98+
Safari iOS 13+
Firefox Android 96+
基本構文
HTML
/* ライト・ダーク両対応を宣言 */
:root {
color-scheme: light dark;
}
/* 特定要素をライトのみに固定 */
.always-light {
color-scheme: light;
}
/* meta タグとの併用 */
/* <meta name="color-scheme" content="light dark"> */実務での使いどころ
-
ダークモード自動対応
フォーム要素やスクロールバーがシステム設定に応じて自動でダークモードに切り替わる。
-
初期描画のちらつき防止
meta タグで事前にカラースキームを宣言し、CSS 読み込み前の白画面フラッシュを防止する。
注意点
- color-scheme だけではカスタムスタイルは切り替わらない。独自のダークモードスタイルは prefers-color-scheme メディアクエリで別途定義する必要がある。
アクセシビリティ
- ユーザーのシステム設定を尊重したカラースキームの提供は、まぶしさの軽減やバッテリー節約に貢献し、アクセシビリティの基本である。