CSSで実現する「ダークモード対応」のベストプラクティス

はじめに

ユーザーのOSやブラウザ設定に応じて、ダークモード／ライトモードを切り替えられるデザインは今や標準的になっています。ここでは、CSSだけでシンプルに対応する方法と、より良いユーザー体験を実現するための工夫を紹介します。

1. prefers-color-schemeの利用

CSSメディアクエリでOSのテーマ設定を判定し、自動的に配色を切り替えられます。まずはライトモードをデフォルトとして定義し、prefers-color-scheme: dark でダークモード用のスタイルを上書きします。

/* ライトモード（デフォルト） */
body {
  background: #ffffff;
  color: #000000;
}

/* ダークモード */
@media (prefers-color-scheme: dark) {
  body {
    background: #121212;
    color: #ffffff;
  }
}

ダークモード用の背景色は完全な黒ではなく、#121212などのやや明るい色を使うとコントラストが過度にならず、視認性と疲れにくさのバランスが取れます。

2. トグル切り替えの実装（ユーザー選択を優先）

OS設定を尊重しつつも、ユーザーが好みのテーマを手動で切り替えられるとさらに親切です。data-theme 属性を持つ body 要素のスタイルを用意し、JavaScriptでトグルを実装します。

body[data-theme="dark"] {
  background: #121212;
  color: #ffffff;
}

body[data-theme="light"] {
  background: #ffffff;
  color: #000000;
}

const toggle = document.getElementById("theme-toggle");
toggle.addEventListener("click", () => {
  document.body.dataset.theme =
    document.body.dataset.theme === "dark" ? "light" : "dark";
});

ローカルストレージに選択したテーマを保存しておくと、ページ再訪問時にもユーザーの好みが維持されます。初期表示時には prefers-color-scheme でOS設定を確認し、保存されたテーマがあればそちらを優先する流れが一般的です。

3. 実践的なポイント

コントラスト比を意識してアクセシビリティを確保: テキストと背景のコントラスト比はWCAGの推奨値（通常テキストで4.5:1以上）を満たすように調整しましょう。
画像やアイコンもダークモード用を用意: SVGなら fill を切り替える、ビットマップならフィルターや別ファイルで対応するなど、ビジュアル要素全体で統一感を保ちます。
transition を使って滑らかな切り替えを演出: color や background-color に短いトランジションを設定すると、テーマ変更時のちらつきを抑えられます。

まとめ

prefers-color-scheme で自動切り替えに対応しつつ、ユーザーが選択できるトグルを備えるのがベストプラクティスです。アクセシビリティやビジュアルの統一感を意識すれば、モダンで快適なユーザー体験を提供できます。