ここ数年で、スマホやPCの設定画面に「ライト／ダークモード切り替え」が当たり前のように登場するようになりましたよね。黒い背景に白い文字、目に優しくて何となくかっこいいあのデザインです。
白背景がまぶしい夜、黒ベースのUIに切り替えるだけで目が休まる──そんな経験をしたことがある人も多いはずです。
では、Webサイトはどうでしょうか？
ユーザーのOSがダークモードでも、サイトが真っ白に輝いていたら……ちょっと残念ですよね。
そこで登場したのが CSSの color-scheme() プロパティ。これは、ブラウザに「このページはライトモードにもダークモードにも対応してますよ」と伝えるための“宣言文”のようなものです。
コード1行で、サイトの印象をぐっと今風に整える力を持っています。
color-scheme() って何ぞや？
color-scheme は、ブラウザやOSに「このページはどのカラーモードに対応しているか」を教えるためのCSSプロパティです。
これを設定しておくと、ブラウザが提供する標準UI（フォーム部品・スクロールバー・選択領域など）が、ユーザーのライト／ダークモード設定に合わせて自動的に最適化されます。
つまり、開発者が「フォームのinputやselectを全部黒背景に直す」ようなCSSを一から書かなくても、ブラウザがある程度よしなに切り替えてくれるのです。
実際の宣言は、こんな感じ。
:root {
color-scheme: light dark;
}これだけで、あなたのサイトはライトモードとダークモードの両方に“対応できるサイト”になります。
実際に何が変わるの？
color-scheme が有効になると、ブラウザのUIの多くが変化します。
たとえば、次のような違いが出ます。
フォーム要素
ダークモード環境では、テキストボックスやボタンが黒やグレーを基調にしたスタイルになります。
一方ライトモードでは白背景のまま。これにより、サイト全体が統一感のある見た目に。
スクロールバー
ChromeやSafariでは、スクロールバーのトラックやサム（つまみ）部分がモードに応じて自動で暗く／明るくなります。
カスタムCSSを一切書かずにこれが変わるのは地味に嬉しいポイントです。
セレクトボックスやチェックボックス
ブラウザ標準のセレクトやチェックボックスも、自動で背景や枠の色が切り替わります。
特にモバイル端末では、システム全体と統一された見た目になります。
どうやって使うの？
先程も短いサンプルコードを載せていますが、color-scheme の構文はとてもシンプルです。
両方に対応したい場合
:root {
color-scheme: light dark;
}片方だけ対応にしたい場合
body {
color-scheme: only light;
}特定のコンポーネントだけ制御したい場合
.card {
color-scheme: only dark;
}また、ブラウザがページを読み込む前にスキームを把握できるよう、HTMLの <head> に以下を追加しておくのもおすすめです。
これで「チラつき」や「一瞬だけ白い背景が出る」現象を軽減できます。
<meta name="color-scheme" content="light dark">
対応ブラウザは？
主要なブラウザはすでに color-scheme に対応しています。
ひとまず “Can I use…” してみましょう。
CSS property: color-scheme
ChromeとEdgeはバージョン81以降で、Firefoxは96以降からサポートされています。
”Filtered” のメンツから消えてしまっていますが、Safariは13以降、OperaなどChromiumベースのブラウザでも同様に対応済みです。
古いブラウザでは宣言が無視されるだけなので、後方互換性の心配はほぼありません。
ただし、UI要素のダーク化が部分的にしか反映されないケースもあるため、主要ブラウザで実際に見た目を確認するのがベストです。
color-scheme って、実際どんな場面で使えるの？
カラーモードを伝えてくれるのは分かったけど、じゃあ具体的にどんな風に役立つの？
そう思った方のために、いくつかのユースケースを上げてみましょう。
1. サイト全体をライト／ダーク両対応にする
最も基本的な使い方です。
背景・文字色をメディアクエリで分岐させながら、color-scheme でUIも一緒に調整します。
:root {
color-scheme: light dark;
}
body {
background-color: #ffffff;
color: #000000;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #fafafa;
}
}2. 管理画面やウィジェットをライト固定にする
ユーザーのモード設定に関係なく「ここはライトモードで見せたい」という場合もありますよね。
そんな時は、「特定のコンポーネントだけ制御」でご紹介した使い方で対応できます。
SNS埋め込みや外部ウィジェットの背景色を統一したいときなどに便利です。
.widget {
color-scheme: only light;
}3. iframeコンテンツの調整
外部から埋め込むiframe内で color-scheme を設定しておくと、ホストページがダークモードでもiframeの中身だけライト固定にできます。
html {
color-scheme: only light;
}こんな注意点も！
ライト／ダークモード設定に合わせて自動的に最適化されるなんて、ものすごく便利！っておもいますよね。
でも、全てを全自動で最適化してくれるわけではないので注意が必要です。
具体例をいくつか挙げてみましょう。
背景・文字色は自前で指定する
color-scheme は、あくまで「ブラウザへのヒント」であり、あなたのCSSの色指定を自動で変えてくれるわけではありません。
必ず background-color や color を両モード分用意しておきましょう。
既存スタイルとの衝突
すでにinputなどに独自デザインが施されている場合、color-scheme の指定によって一部のブラウザで見た目が変わることがあります。
wordpressで作られたサイトであれば、使用しているテーマや、プラグインによって読み込まれているスタイルなどです。
リリース前に複数ブラウザで確認しておくと安心です。
アクセシビリティへの配慮
暗い背景ではコントラストが低くなりがちですよね。
アクセシビリティへの配慮が欠かせないプロダクトでは、WCAG 2.1 の推奨基準（4.5:1以上）を意識した配色が求められます。
特にボタン・リンクの色は見落とされがちなポイントなので、一層の注意をはらいましょう。
なぜ生まれたの？ color-scheme 誕生の背景
そもそも、なぜこのプロパティが生まれたのかーーちょっと小話。
むかしむかし……Web黎明期では、サイトの配色はすべて開発者側で固定されていました。
しかし、OS全体で「ユーザーが自分の好みのテーマを選ぶ」流れが進み、Webでもそれを尊重すべきでは？という議論がW3Cで始まったと言われています。
そして、まず生まれたのが @media (prefers-color-scheme)。
しかしこれだけでは、フォームやスクロールバーなどのブラウザUIが切り替わりませんでした。
つまり、「CSSで背景は暗くしたのに、フォームだけ真っ白！」という不自然な状態が起きていたのです。
これを解決するために、ブラウザ自身に“どのモードに対応しているか”を伝える新しい仕組みとして color-scheme が誕生しました。
言わば「WebデザインとOSテーマをつなぐ通訳役」です。
このプロパティが誕生したおかげで、ユーザーが自分好みの閲覧環境でコンテンツを閲覧できるようになってきたんですね。
さらに…… light-dark() と CSSの進化
CSSの世界では、color-scheme を足がかりに、今後さらに「モードを意識したデザイン」が標準化されようとしています。
たとえば light-dark() 関数。
body {
background-color: light-dark(#fff, #121212);
color: light-dark(#000, #fafafa);
}これなら、メディアクエリすら不要。
1行でライト／ダークを切り替えられます。
また、将来的には color-contrast() 関数で「背景とのコントラストを自動調整する」仕様も検討中されているとか。
こうした流れを見ると、CSSがますます“ユーザー体験を守るデザイン言語”になっていることが分かります。
Webをより快適にする小さな心遣い
color-scheme() は、見た目を派手に変える魔法ではありませんが、ユーザーの環境を尊重し、Webをより快適にするための“心遣い”のようなプロパティです。
デザインはディテールに宿る——
あなたのCSSにも、この小さな気配りを加えてみませんか？
