ダークモード対応の基礎｜prefers-color-schemeとCSS変数で配色を切り替える

スマートフォンやPCの設定に「ダークモード」「ダークテーマ」という項目を見たことはないでしょうか。背景を暗くして文字を明るくする、あの表示モードです。近年はOSレベルでダークモードが広く普及し、Webサイトやアプリにも「端末の設定に合わせて自動で暗くしてほしい」という期待が高まっています。本記事では、ダークモード対応がなぜ必要なのか、どんな仕組みで実現するのか、そして実装でつまずきやすいポイントを順を追って解説します。

なぜダークモード対応が必要か

ダークモードとは、背景を暗い色、文字やUIを明るい色で表示する配色モードのことです。従来の明るい背景（ライトモード）に対して、近年は多くのユーザーがダークモードを好んで使うようになりました。対応が求められる理由は、大きく次の3つに整理できます。

• 目の負担軽減：夜間や暗い部屋では、明るい画面はまぶしく感じられます。背景を暗くすることで、周囲との明暗差がやわらぎ、目の負担を抑えられます。
• 省電力：有機EL（OLED）ディスプレイでは、黒い画素は発光を抑えるため、暗い配色のほうがバッテリー消費を抑えられる場合があります。
• ユーザーの好みと一貫性：OSをダークモードにしている人にとって、サイトだけ突然まぶしく光るのは違和感があります。端末の設定に合わせることで、体験の一貫性を保てます。

つまりダークモード対応は、単なる流行ではなく、見やすさ・省電力・好みへの配慮という実用的な価値を持つ取り組みです。実際にライトとダークの両方で配色を設計する際は、色の数値を相互に変換できるカラーコード変換ツールが手元にあると、HEXやRGBの行き来がスムーズになります。

prefers-color-schemeで好みを検知する

ダークモード対応の出発点は、ユーザーが端末でどちらのモードを選んでいるかを知ることです。これにはCSSのメディアクエリ prefers-color-scheme を使います。OSやブラウザの設定がダークモードなら dark、ライトモードなら light という値になります。

@media (prefers-color-scheme: dark) { /* 暗い配色をここに書く */ }

このメディアクエリの中に、ダークモード時だけ適用したいスタイルを書きます。基本のスタイルをライトモード向けに用意し、ダークモード時の上書きを prefers-color-scheme: dark の中にまとめる、という構成が分かりやすいでしょう。

ポイントは、ユーザーの明示的な操作なしに自動で切り替わる点です。サイト側でボタンを置かなくても、端末の設定さえ反映すれば最低限の対応になります。さらに「サイト独自の切替ボタン」を用意したい場合は、後述するCSS変数と組み合わせ、JavaScriptでクラスや属性を付け替える方式がよく使われます。

CSS変数で配色を切り替える

ダークモードを各要素ごとに個別指定していくと、コードが膨れ上がり、保守が一気に難しくなります。そこで活躍するのがCSSカスタムプロパティ（CSS変数）です。色を直接書くのではなく、変数として一箇所で定義し、要素からは変数を参照するようにします。

:root { --bg: #ffffff; --text: #1a1a1a; }
@media (prefers-color-scheme: dark) { :root { --bg: #121212; --text: #e6e6e6; } }

このように、ライトモードの色を :root に定義し、ダークモード時は同じ変数名に別の値を割り当てます。あとは各要素で background: var(--bg); や color: var(--text); と書いておけば、モードが切り替わるだけで全体の配色が一斉に変わります。色の定義を一元化できるのが最大の利点です。

変数として持たせる色は、背景・文字・リンク・枠線・アクセントカラーなど、役割ごとに名前を付けておくと管理しやすくなります。ライトとダークで対になる値を決めるとき、どの色をどのHEX値にするか検討する場面では、カラーコード変換ツールでHEXとRGBやHSLを行き来しながら微調整すると、明度や彩度のバランスを取りやすくなります。

純黒を避けてコントラストを確保する

ダークモードでよくある失敗が、背景を真っ黒（#000000）、文字を真っ白（#ffffff）にしてしまうことです。一見すっきり見えますが、純黒に純白の組み合わせはコントラストが強すぎて、文字がにじんで見えたり（ハレーション）、長時間読むと目が疲れたりします。

そこで推奨されるのが、背景は真っ黒ではなく濃いグレー（例：#121212 前後）、文字は真っ白ではなくわずかに落とした白（例：#e6e6e6 前後）にすることです。明暗の差を少しやわらげることで、ぐっと読みやすくなります。

一方で、やわらげすぎてコントラストが不足すると、今度は文字が読みにくくなります。アクセシビリティの指針（WCAG）では、本文テキストに4.5:1以上のコントラスト比が推奨されています。ダークモードはライトモードとは別の配色なので、両方のモードでそれぞれコントラストを確認することが欠かせません。配色が基準を満たしているかは、コントラストチェッカーツールに背景色と文字色を入力すれば、比率と合否をすぐ確かめられます。

• 背景は純黒を避け、濃いグレーを基調にする。
• 文字は純白を避け、明度をわずかに下げた白にする。
• ライト・ダーク両方でコントラストチェッカーツールを使い、4.5:1以上を目安に確認する。

画像とシャドウの調整

配色を変数で切り替えても、それだけでは整わない要素があります。代表が画像と影（シャドウ）です。

画像・ロゴ：背景が透過した黒いロゴは、暗い背景では見えなくなってしまいます。ダークモード用に色を反転させたロゴを用意するか、ロゴの背景に余白を持たせるなどの工夫が必要です。写真などは、ダークモードではわずかに明度を下げて周囲となじませると、画面の中で浮いて見えるのを防げます。

影（シャドウ）：ライトモードでは、要素に薄い影を付けて浮き上がって見せる手法が一般的です。しかし暗い背景では黒い影はほとんど見えず、立体感が出ません。ダークモードでは、影を弱めたり、逆に明るい縁取りや背景との明度差で要素の境界を表現するほうが効果的な場合があります。

このように、ダークモード対応は「色を反転させて終わり」ではなく、要素の見え方そのものを設計し直す作業を含みます。とはいえ、すべてを完璧にしようとすると終わらないので、まずは文字と背景のコントラスト、次に画像と影、という優先順位で進めるとよいでしょう。

実装の進め方

最後に、ダークモード対応を無理なく進めるための手順を整理します。いきなり完璧を目指すより、段階的に積み上げるのが現実的です。

• 1. 色を変数化する：まず既存のライトモードの配色を、背景・文字・枠線などの役割ごとにCSS変数へ置き換えます。これだけでも保守性が大きく向上します。
• 2. ダーク用の値を定義する：prefers-color-scheme: dark の中で、各変数にダーク用の値を割り当てます。純黒・純白を避けた値を選ぶのがコツです。
• 3. コントラストを検証する：ライト・ダーク両方の配色について、コントラストチェッカーツールで本文や見出しの比率を確認し、基準を満たすよう微調整します。色の数値調整にはカラーコード変換ツールが役立ちます。
• 4. 画像と影を見直す：暗い背景で見えにくくなるロゴや、効かなくなる影を調整します。
• 5. 実機で確認する：PCとスマートフォンの両方で、OS設定を切り替えて実際の見え方をチェックします。

ダークモード対応は、CSS変数とprefers-color-schemeという基本さえ押さえれば、決して難しいものではありません。大切なのは、色を一箇所で管理し、ライト・ダーク両方でコントラストを確認しながら進めることです。まずは手元の配色をカラーコード変換ツールで整理し、コントラストチェッカーツールで見やすさを確かめるところから始めてみてください。

なお本記事は一般的な情報の提供を目的としたものです。メディアクエリやアクセシビリティ指針の仕様は更新されることがあります。実装にあたっては、最新の公式ドキュメントやブラウザの対応状況も確認したうえで判断してください。