こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
最近「ダークモード対応してますか？」というご相談が増えてきました。
スマホでもPCでも、OSやブラウザがダークテーマに対応するのが当たり前になってきた今、Webサイト側でも自然と「明暗切り替え」に対応しておくのがユーザビリティの観点でも重要です!
しかもこれ、CSS変数（カスタムプロパティ）を使えば、想像以上にスマートに実装できるんです。
今回は、CSS初心者にもわかりやすいように、CSSだけでダークモードに対応する方法を、実例とともにじっくり解説していきます。
なぜダークモード対応が必要なの？
スマホやPCを長時間見る人にとって、ダークモードは目の疲れを軽減する味方。最近ではOS自体がテーマ切り替え機能を標準搭載しており、以下のような理由で多くのWebサイトが対応を進めています。
- 目の負担が減り、アクセシビリティが向上する
- バッテリーの節約になる（特にOLEDディスプレイ）
- ユーザーの好みに合わせたUX設計ができる
ということで、「うちのサイトもそろそろ…」とお考えなら、CSS変数を活用したダークモード対応をおすすめします。
CSS変数を使った明暗テーマの切り替え設計
CSS変数は、同じスタイルを一括管理できる優れもの。
これを使えば、明るいテーマ（ライトモード）と暗いテーマ（ダークモード）を一括で切り替え可能になります。
まずは基本の変数を定義
CSSの:rootで、デフォルトの色（ライトモード）を定義します。
:root {
--bg-color: #ffffff;
--text-color: #333333;
--accent-color: #007acc;
}
この変数を、サイト全体の色指定に使っていきます。
body {
background-color: var(--bg-color);
color: var(--text-color);
}
a {
color: var(--accent-color);
}
メディアクエリでダークモードに対応
次に、ブラウザやOSが「ダークモード」の設定を検知したときのスタイルを追加します。
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #1e1e1e;
--text-color: #f1f1f1;
--accent-color: #4fc3f7;
}
}
これだけで、OSがダークモードなら自動的に配色が切り替わるようになります。スマートですね。
手動切り替えもできるようにする
ユーザーにボタンで「ライト」「ダーク」を選ばせたい場合、JavaScriptでクラスを切り替える設計もできます。
HTMLとJSで切り替え機能を作る
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
これで、ボタンを押すたびにライト／ダークを自由に切り替えられるようになります。
ローカルストレージで記憶させれば、次回以降も反映できますね。
サイト全体で使えるようにCSS設計を整える
最初は小さなサイトでも、ページが増えてくると変数の構成がバラバラになりがち。
おすすめは以下のような構造でCSSを整理しておくことです。
- base.cssに--bg-colorや--text-colorなど基本色だけを定義
- light.cssとdark.cssに各テーマの上書き値を定義
- JavaScriptでテーマ切り替え時にCSSファイルを読み替える
これなら大規模なサイトでも保守しやすく、チーム開発でも混乱がありません。
まとめ
今やダークモードは“おまけ”ではなく、UXの基本設計のひとつ。
CSS変数とprefers-color-schemeを組み合わせれば、ライブラリなし・CSSだけで対応できますし、デザインの幅もぐっと広がります。
まだ対応していない方は、ぜひ今回のコード例をベースに取り入れてみてくださいね！
satokotadesignキャンペーン実施中！
