ウェブサイトを訪れた時、画面が明るすぎて目が疲れた経験はありませんか。夜や暗い場所ではダークモードが目に優しく、見やすさも向上します。CSSのprefers-color-schemeを使えば、ユーザーのOS設定に応じて自動でライト／ダークテーマを切り替えることができます。本記事では、基本から応用、対応ブラウザやアクセシビリティ、最新のCSS機能まで幅広く解説し、実装におけるベストプラクティスを紹介します。
目次
ダークモード CSS prefers-color-scheme の基本とは何か
ダークモード CSS prefers-color-scheme は、ユーザーのデバイスが設定している色の好み（ライトテーマかダークテーマか）を検知し、その設定に応じてウェブサイトの見た目を切り替えるためのCSSメディアクエリです。これはOSレベルまたはブラウザ設定からの情報を参照し、ページが読み込まれた時に自動で最適なテーマを適用することを可能にします。現在この機能は主要なブラウザで広くサポートされており、サイト訪問者の見やすさや使いやすさを向上させる手段として一般的に採用されています。
CSSでライトモードをデフォルトにし、@media(prefers-color-scheme: dark)を使ってダークモード用のスタイルを上書きする方法が典型的です。
この基本的な原理を理解することで、メンテナンス性の良いテーマ設計や、アクセシビリティを考慮したカラー選定が可能になります。
prefers-color-scheme の仕組み
prefers-color-scheme は CSS Media Queries Level 5 によるメディア機能で、ユーザーがライトテーマかダークテーマを好むかをブラウザがOSから取得します。値には light と dark があり、ユーザーの設定がライトかダークかに応じてそれぞれのスタイルを適用できます。
この機能は JavaScript を使わずに動作するため、パフォーマンスが高く、CSSだけでテーマ変更が可能です。
従来は no-preference という値もありましたが、最近では多くのブラウザがこの値を省略または非推奨としています。
ブラウザ対応状況
主要なデスクトップ及びモバイルブラウザは、2019年から2020年にかけて prefers-color-scheme のサポートを開始しています。例えば Chrome 76、Firefox 67、Safari 12.1、Edge 79 などが対応しています。現在ではグローバルユーザーのほぼ全員（およそ96〜97％）がこの機能を使用可能なブラウザを利用していると言われています。
なお、古いバージョンや特殊な環境ではサポートされていない可能性があり、その場合はデフォルトテーマが表示されることになります。
また、light-dark() 関数や color-scheme プロパティなど新しいCSS機能との併用により、より洗練されたテーマ実装が可能になってきています。
実装の基本構文
代表的な構文として、まず基本テーマを :root などで定義し、その後 @media(prefers-color-scheme: dark) を利用してダークモード用の定義を上書きするスタイルが一般的です。
例えば背景色や文字色を変えるには、通常の CSS 内で :root にカラー変数を定義し、ダークモード時にはその変数を切り替えるという手法が推奨されます。
こうした実装により、一箇所でカラーをまとめられ、メンテナンス性と可読性が高まります。
prefers-color-scheme を使った実践的なテーマ切り替え方法
prefers-color-scheme を使ってウェブサイトにライト／ダークテーマを実装する際には、CSS変数（カスタムプロパティ）や JS での手動切替も含めて、複数の方法があります。それぞれの方法にはメリットとデメリットがあり、どのようなユーザー体験や仕様を重視するかによって選ぶべき設計が変わります。ここでは代表的な手法を比較しながら解説します。
CSS変数（カスタムプロパティ）を用いたテーマ設計
CSS変数を :root で定義しておき、それらをライトモード／ダークモードで切り替えるスタイルを media query 内で設定するアプローチが最もメンテナンス性が高い方法です。
例えば背景、文字、アクセントカラーなどを変数で定義し、prefers-color-scheme によってそれらの変数を差し替えることで、全体のテーマが柔軟に変化するようになります。
この手法によりコードの重複を抑え、今後デザインを拡張する際にもカラー体系の管理がしやすくなります。
手動テーマ切り替え（トグルスイッチ）を併用する方法
OSの設定を尊重しつつも、ユーザーがサイト内でライトモード／ダークモードを自由に切り替えられる UI を設けることが望ましいです。
この場合、JS を利用して body または html 要素に class や data 属性を付与し、CSS でそのクラス／属性が付いている場合のテーマを定義します。
さらにユーザー設定を localStorage などで保存すれば、ユーザーが次回訪問した際も指定したテーマが維持されます。
light-dark() 関数や color-scheme プロパティの活用
light-dark() 関数は CSS 色値の中でライトテーマとダークテーマ双方の値を一度に指定できる新機能で、見た目もコードもすっきりします。
また color-scheme プロパティを使うことで、ブラウザのスクロールバーや組み込みフォーム要素などがユーザーのテーマに応じて自然にスタイルが変わります。
これらの機能は比較的新しいため、サポート状況を確認したうえで併用することが望ましく、フォールバックを用意することが重要です。
デザインとアクセシビリティのポイント
ダークモードを実装する際には、配色デザインや視認性、目の疲れ、コントラスト、ブランドの一貫性などに注意を払う必要があります。単に背景を黒、文字を白にするだけではなく、色彩調整や視覚的な快適性を考慮して設計することが良いユーザー体験を生みます。
コントラスト比と色の選び方
暗い背景には高コントラストの文字色が必要ですが、純粋な白－黒の組み合わせは目に刺さることがあるため、暗めのグレーや柔らかいアクセントカラーを使うと良いです。
背景色は #000000 を避けて近い濃いグレーを用いると自然で落ち着いた印象になります。
またアクセントカラーは彩度を抑え、明度を少し上げることで暗背景でも視認性を確保できます。
画像アイコンなどのメディア対応
ロゴやアイコン、画像などがデザイン内に含まれている場合、それらもテーマに応じて対応させるべきです。ダーク背景で暗い画像は見えにくいため、テーマ毎に異なる画像を用意する、または HTML picture 要素や media 属性を活用して切り替える方法があります。
SVG や透明背景の画像を用いることで背景色の影響を受けやすく、必要なカラー調整がしやすくなります。
目の疲れを軽減するデザイン調整
暗い環境での視認性を保つために純白は避け、柔らかなオフホワイトや薄いグレーを文字色に使うことが推奨されます。
また影の使い方を控えめにし、発光性の強いエフェクトを最小限にすることで眩しさを抑えることができます。
さらにはディスプレイ種別（OLED や LCD）や周囲光の状況も考慮し、テーマの明暗度や色調を調整することが望ましいです。
実装例：具体的なコードサンプル
ここではライトモードをデフォルトとしつつ、prefers-color-scheme でダークモードを切り替える基本的なコード例を示します。実際に手を動かす際の参考になります。適切にCSS変数を用いてテーマが見やすく、メンテナンスしやすい構成です。
変数を使ったテーマ切り替えの基本コード
例として背景色と文字色を変数で定義する方法です。まずライトテーマを基本とし、prefers-color-scheme ダーク時に上書きする形です。
:root {
--bg-color: #ffffff;
--text-color: #222222;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #121212;
--text-color: #eeeeee;
}
}
body { background-color: var(--bg-color); color: var(--text-color); }
このような構成であれば、変数を増やしても一箇所の定義変更で全体に反映できるため、保守性が高まります。
手動スイッチ付きのコード例
ユーザーが自身でライト／ダークを切り替えられる UI を加える例です。スイッチ切替後は該当クラスを html または body に付与し、CSSでそのクラスを優先的に適用します。
保存用に localStorage を使い、次回訪問時にもテーマを維持します。
また HTML が JS を読み込む前に FOIT（Flash of Incorrect Theme）が発生しない工夫も含めるとより完成度が高まります。
新機能 light-dark() を使った例
light-dark() 関数を使えば、色の指定が簡潔になり、media query の中で明示的に切り替える必要が減ります。例として色のプロパティに light-dark(ライト時, ダーク時) を使う方法があります。
また color-scheme プロパティを併用すると、フォーム要素やスクロールバーのスタイルもテーマに応じてブラウザネイティブな形で切り替わるようになります。
ただし、この機能はブラウザによって実装状況が異なるため、フォールバックを必ず用意することが望まれます。
対応ブラウザと互換性の注意点
prefers-color-scheme は現在多くのブラウザでサポートされていますが、全ての環境で “完全に同じ動作”を期待することはできません。利用者のブラウザや OS のバージョン、設定、デバイスによって挙動が異なることがあります。実装前に対象ユーザーの環境を把握し、互換性とフォールバックを設置することが大切です。
主要ブラウザのサポート状況
Chrome、Firefox、Safari、Edge などは 2019～2020 年に prefers-color-scheme の対応を始めています。具体的には Chrome 76、Firefox 67、Safari 12.1、Edge 79 といったバージョンで機能が認められています。
ほぼすべてのモダンブラウザで使用できますが、サポート外の古いバージョンやカスタマイズされているブラウザでは期待通り動作しない場合があります。
light-dark() 関数は新しめのブラウザで対応が進んでおり、主に 2024 年以降の更新で利用可能になることが多くなっています。
フォールバックの策
環境で prefers-color-scheme が使えない場合に備えて、ライトテーマをデフォルトに設定しておき、それをベースに設計するのが基本です。
例えば prefers-color-scheme の部分が無視される環境では、デフォルトのスタイルだけが適用されることで整った見た目を維持するようにします。
また、手動切り替えの UI を設けることで、OS 設定に依存したくないユーザーにも対応可能になります。
SEOやパフォーマンスへの影響と最適化
ダークモード CSS prefers-color-scheme を適切に実装することは、SEOにもパフォーマンスにも間接的な好影響を与える場合があります。ページの読み込みや描画がスムーズになり、ユーザー離脱を防ぐことができれば評価も向上します。ここでは具体的な最適化ポイントを抑えます。
描画のちらつき対策（Flash of Incorrect Theme）
OS やブラウザ設定のテーマとサイトテーマが一致するまでの間、一瞬ライト／ダークモードが間違って表示されることがあります。これを FOIT と呼びます。
解決方法として、theme Cookie や localStorage を使って以前のユーザー設定を記憶し、読み込み時に 要素にテーマを先に反映させるスクリプトを head 内に配置するなどの工夫があります。
CSS 自体にも初期スタイルを minified で設定しておくことでちらつきを抑えることができます。
CSS ファイルの圧縮と読み込み順
テーマ用 CSS が複数ある場合、ファイル数やサイズが増えると読み込み時間が延びる恐れがあります。可能であればライト／ダーク両方のスタイルを一つのファイルにまとめて CSS 変数で切り替える方式が好まれます。
また media query を使ったスタイルは通常のスタイルより後に読み込むか、同じファイルに記述し、最終的に上書きできる構造にしておくと意図しない優先順位の問題を回避できます。
SEO とユーザー体験の観点
ダークモード対応自体が直接的な検索順位の決定要因ではないですが、ユーザーの滞在時間や離脱率、ページの読みやすさ向上による共有や再訪率などを通じて評価に影響する可能性があります。
さらにアクセシビリティが高く、視覚的ストレスの少ないサイトはユーザー満足度を高め、口コミやリンク獲得につながるため、SEO の間接的なメリットがあります。
よくある問題とその解決策
ダークモード CSS prefers-color-scheme を用いていても、実際の公開サイトでは表示が崩れる、テーマ切替が反映されない、色の見え方が不自然になるなどのトラブルが起きることがあります。以下では具体的なケースとその解決方法を紹介します。
テーマが切り替わらない
ブラウザやデバイスの設定がライト／ダークモードに対応していない、またはテーマ切替のコードが適切に記述されていないと動作しないことがあります。まずはブラウザバージョンを確認し、メディアクエリの記述位置や優先順位を確認します。
body や html に背景色と文字色の両方を明示的に指定していないと、デフォルトスタイルに依存し意図しないテーマになる場合があります。
コントラストが適切でない・目が疲れる
暗モードで文字が純白、背景が真っ黒、といった強すぎる組み合わせは目には刺激的で疲れの原因になります。代替として暗めの背景グレーやオフホワイトの文字などを使い、アクセントカラーも彩度と明度を整えることが必要です。
さらにコントラスト比をツールで検証し、WCAG ガイドラインなどの基準を満たすようにすることでアクセシビリティを担保できます。
画像やアイコンの表示不具合
テーマ切り替えにより背景とのコントラストが取れず、アイコンが見づらくなる・目立たなくなる問題があります。SVG や本体透過の画像を使用し、テーマによってロゴやアイコンを別々に用意するか、 picture 要素や media 属性を使って条件付きで読み込む方法が有効です。
またシェーダーや CSS フィルターを使って画像の色調を動的に変えることも可能ですが、明瞭さを失わないよう注意が必要です。
最新CSS機能の動向と将来性
ダークモード実装の世界にも絶えず進化があり、prefers-color-scheme を基盤とする機能に加えて、新しい CSS 機能や仕様が登場しています。これらを取り入れることで、より簡潔で表現力豊かなテーマ設計が可能になります。
light-dark() 関数の可能性
light-dark() 関数は、ライトモードとダークモードで異なる色を一つの値で指定できる新しい CSS 色関数です。これを使うことでテーマ切り替えを行うメディアクエリの中に変数定義を二重に書かずに済み、コードが簡素化されます。
ただし、対応ブラウザは徐々に拡大中であり、一部ではまだ実験的な段階であるため、フォールバックを併用することが望まれます。
CSS color-scheme プロパティの役割
color-scheme プロパティを html 要素などに設定することで、ブラウザはフォームコントロールやスクロールバーなどネイティブ UI 部分のテーマを自動で適用できるようになります。
これにより画像以外の要素でもテーマに一貫性が生まれ、ユーザー体験がより自然になります。
このプロパティも主要ブラウザでサポートされており、標準仕様として使われることが増えてきています。
まとめ
ダークモード CSS prefers-color-scheme を活用すると、ユーザーのテーマ設定に合わせてサイトテーマを自動的に切り替えることができ、見た目・UX・アクセシビリティの面で大きなメリットがあります。基本構文を理解し、CSS変数を使ったテーマ設計やユーザートグルの併用、コントラストや画像対応などデザインの細部に注意すれば高品質な実装が可能です。
最新の light-dark() 関数や color-scheme プロパティなど、新機能を取り入れればコードの簡潔性や整合性が向上し、保守性も上がります。互換性とフォールバックも忘れずに設計し、ユーザーにとって快適なサイトを追求しましょう。
コメント