ダークテーマでは color-scheme も指定してフォーム部品・スクロールバーを暗くする
背景や文字色を暗くするだけではブラウザ標準の input・select・チェックボックス・スクロールバーは明るいままなので、color-scheme: dark（システム追従なら light dark）でブラウザにも「暗いページ」だと伝える。
どんな時に使う？
[data-theme="dark"]のようなクラス／属性でダークモードを切り替えていて、テキスト入力欄やセレクトだけ白く浮いてしまう時- スクロールバー、日付ピッカー、オートフィルの背景など、CSS で直接スタイルしにくい「ブラウザが描く部分」までまとめて暗くしたい時
コード
css
/* テーマを手動で切り替える場合: ダークテーマ側で宣言 */
[data-theme="dark"] {
color-scheme: dark;
}
[data-theme="light"] {
color-scheme: light;
}
/* OS の設定に追従するだけなら1行で両対応 */
:root {
color-scheme: light dark;
}color-schemeは「このページ（要素）はどの配色で描いてよいか」をブラウザに伝えるプロパティ。darkを含めると、フォーム部品・スクロールバー・Canvasなどのシステムカラー、既定の背景色と文字色がダーク用に切り替わる。light darkと並べると、ユーザーの OS 設定（prefers-color-scheme）に合わせてブラウザが選ぶ。- 要素単位でも指定できるので、ページ全体はライトのまま「この黒いパネルの中だけダーク」もできる。
- 自前の色も同じ切り替えに乗せたい時は、
color-schemeを指定したうえでcolor: light-dark(#111, #eee);のようにlight-dark()関数を使うと、メディアクエリを書かずに済む。
注意点・対応状況
color-schemeは全主要ブラウザで使える。light-dark()も 2024 年以降の主要ブラウザで対応済み。- CSS が読み込まれる前の一瞬だけ白く光る（ダークモードでのちらつき）を防ぎたい時は、HTML の
<head>に<meta name="color-scheme" content="light dark">も入れておく。 - 独自にスタイルした部品（
appearance: noneにしたチェックボックスなど）は自分で色を付ける必要がある。ネイティブ select をカスタマイズする方法は appearance: base-select でネイティブ select をスタイルする を参照。 - 背景色に応じて文字色を自動で決めたい場合は 画像が読み込めない時の alt テキストを contrast-color() で読めるようにする の
contrast-color()も使える。