CSSダークモード対応のやり方｜prefers-color-schemeとlight-dark()

この記事の目次

CSSダークモード対応のやり方とは
基本（構文・仕組み）
サンプルコード（実行結果つき）
動作確認（検証環境と結果）
CSSダークモード対応のやり方の注意点
CSSダークモード対応のやり方でよくあるミス
ブラウザ対応・バージョン
CSSダークモード対応のやり方のチェックリスト
CSSダークモード対応のやり方のFAQ（よくある質問）
筆者の見解（CSSダークモード対応のやり方）
CSSダークモード対応のやり方の関連項目
出典（一次情報）

CSSダークモード対応のやり方とは

ダークモード対応とは、利用者のOSやブラウザが「暗い配色」を選んでいるとき、サイトも暗い配色で表示することです。CSSでは、メディア特性 prefers-color-scheme で設定を読み取り、色を切り替えます。MDNでは、2020年1月から主要ブラウザで広く使えるとされています。

基本（構文・仕組み）

仕組み	役割
`@media (prefers-color-scheme: dark)`	暗い配色を好む利用者のときだけCSSを適用
`color-scheme: light dark`	サイトが両方に対応すると宣言。入力欄やスクロールバーなどの標準部品の配色も合わせる
`light-dark(明, 暗)`	明暗の2色を1行で書く関数
CSSカスタムプロパティ	色を変数にして、切り替えを1か所にまとめる

基本の型は、色を変数にして、ダーク時に変数だけを差し替えることです。

:root {
  color-scheme: light dark;
  --bg: #ffffff; --text: #1f2937; --link: #1d4ed8; --surface: #f3f4f6;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #121212; --text: #e5e7eb; --link: #93c5fd; --surface: #1e1e1e; }
}
body { background: var(--bg); color: var(--text); }
a { color: var(--link); }

サンプルコード（実行結果つき）

OS設定に従いつつ、利用者がボタンで手動切り替えもできる例です。data-theme 属性を使います。

:root[data-theme="light"] { --bg:#ffffff; --text:#1f2937; --link:#1d4ed8; --surface:#f3f4f6; color-scheme: light; }
:root[data-theme="dark"]  { --bg:#121212; --text:#e5e7eb; --link:#93c5fd; --surface:#1e1e1e; color-scheme: dark; }

.ld { background: light-dark(#fff7ed, #3b2a1a); color: light-dark(#7c2d12, #fed7aa); }

// 手動切り替え（localStorage の保存は省略）
document.documentElement.dataset.theme = 'dark';

<head> に <meta name="color-scheme" content="light dark"> を入れると、CSS読み込み前の一瞬の白い画面を減らせます。

動作確認（検証環境と結果）

環境: Windows 11、Microsoft Edge 154（Chromium系、headless）。ログは C:Tempks2techtestscss-dark-mode.md。
実行: render.ps1 で幅1200・390指定で描画し、data-theme を付け替えて getComputedStyle を確認しました。
結果: この環境の headless Edge では matchMedia('(prefers-color-scheme: dark)') が true で、何も指定しない状態の背景は rgb(18, 18, 18) でした。data-theme=dark で背景 rgb(18, 18, 18)・文字 rgb(229, 231, 235)、data-theme=light で背景 rgb(255, 255, 255) に切り替わりました。light-dark() は、暗いとき rgb(59, 42, 26)、明るいとき rgb(255, 247, 237) でした。
注意: 環境が最初からダーク設定だったため、OSがライトの場合の自動表示は未検証です。localStorage による保存、Safari・Firefox の表示も未検証です。

CSSダークモード対応のやり方の注意点

暗い背景に純白の文字を置くと、まぶしく感じる人もいます。灰色寄りの色（上の例では #e5e7eb）を使う案もあります。
ダーク用の色も、WCAG 1.4.3 のコントラスト比（通常の文字で4.5:1以上、大きな文字で3:1以上）を満たす必要があります。例えば #e5e7eb と #121212 の組み合わせは約15.1:1でした（計算ツールで算出）。→ コントラスト比
明るい背景で選んだ青（#2563eb）は、#121212 の上では約3.6:1と不足します。ダークでは明るい青（#93c5fd、約10.4:1）に変えます。
画像やロゴは、背景が透明でないと暗い背景で浮くことがあります。
light-dark() は比較的新しい関数です。対象ブラウザを確認し、必要なら変数方式を使います。