ダークモード

Dark Mode

web development beginner

画面の背景を暗い色、文字を明るい色にして表示する配色モードのこと。

概要（サマリー）

ダークモードとは、画面の背景を暗い色、文字を明るい色にして表示する配色モードのことである。白い紙に黒い文字を印刷するのが通常の見え方（ライトモード）だとすれば、ダークモードは黒板に白いチョークで書いた状態に近い。

夜間や暗い部屋では、真っ白な画面はまぶしく感じられる。ダークモードはそのまぶしさを抑えるために生まれた。いまではOS・ブラウザ・アプリのほとんどが対応しており、Webサイト側も「読み手の設定に合わせて色を変える」ことが当たり前になりつつある。

以下は、ボタンを押すと配色が切り替わるダークモードのデモである。

NOVEBLO

背景色と文字色が入れ替わり、カードの境界線の濃さも変わっている。

詳細解説

ダークモードとは何か

ダークモードは、単に「色を反転させたもの」ではない。背景・文字・境界線・影・リンク色など、画面を構成する色をひとまとまりの配色セット（テーマ）として用意し、それを丸ごと差し替える仕組みである。

黒背景に白文字を置くだけだと、ライトモードで使っていた薄いグレーの境界線が見えなくなったり、影がまったく効かなくなったりする。暗い背景では影の代わりに「背景よりわずかに明るい面」で階層を表現するなど、考え方そのものを切り替える必要がある。

OSの設定に合わせる（prefers-color-scheme）

利用者はすでにOSやブラウザで「ライト」「ダーク」を選んでいることが多い。その設定はメディアクエリの prefers-color-scheme で読み取れる。

/* 既定はライトモードの配色 */
:root {
  --bg: #ffffff;
  --fg: #1e293b;
}

/* 利用者がダークを選んでいるときだけ上書きする */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12181f;
    --fg: #e2e8f0;
  }
}

body {
  background: var(--bg);
  color: var(--fg);
}

ポイントは、色を直接書かずCSS変数（カスタムプロパティ）に逃がしているところだ。こうしておくと、モードごとに書き換えるのは変数の定義だけで済み、body や各パーツのCSSは1つのままで足りる。色をあちこちに直接書いていると、ダークモード対応のたびに同じ修正を何十か所も繰り返すことになる。

サイト内に切り替えボタンを置く

OSの設定に追従するだけでなく、サイト側にも切り替えボタンを置きたい場合がある。そのときは、選んだモードをhtml要素などの属性やクラスとして持たせ、CSS側でその状態を見て色を変える。

<html data-theme="dark">

:root { --bg: #ffffff; --fg: #1e293b; }
[data-theme="dark"] { --bg: #12181f; --fg: #e2e8f0; }

// ボタンを押したらテーマを入れ替え、選択を保存する
button.addEventListener('click', function () {
  var now = document.documentElement.getAttribute('data-theme');
  var next = now === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', next);
  localStorage.setItem('theme', next);
});

選んだモードはLocalStorageなどに保存しておく。保存しないと、ページを移動するたびに設定が元に戻ってしまう。

「一瞬白く光る」問題

ダークモード実装で最も多いつまずきが、ページ読み込みの瞬間だけ白い画面が見えてしまう現象である。保存済みのテーマを読み取るJavaScriptがページ末尾で実行されると、それまでの一瞬はライトモードで描画されてしまうためだ。暗い部屋で読んでいる人にとっては、目に刺さる不快な一瞬になる。

対策は、テーマを適用する処理を<head> 内のできるだけ早い位置で実行することである。本文の描画より前に data-theme を付けてしまえば、白い画面は現れない。

読みやすさとコントラスト

暗い背景に明るい文字を置くときは、明暗の差（コントラスト比）に注意したい。差が小さすぎれば当然読みにくいが、真っ黒（#000000）の背景に真っ白（#ffffff）の文字という最大の組み合わせも、実は読みやすくない。文字がにじんで見える「ハレーション」が起きやすく、長文では目が疲れる。

そのため実務では、背景を少し明るい濃紺・濃灰（例: #12181f）に、文字を少し暗い白（例: #e2e8f0）に寄せることが多い。読みやすさの確保はアクセシビリティの観点でも重要で、本文には十分なコントラスト比を確保することが推奨されている。

画像・影・ロゴの扱い

配色以外にも、モードによって見え方が変わる要素がある。

白背景の画像: 透過されていないPNGなどは、暗い背景の上で白い四角として浮いてしまう
ロゴ: 黒一色のロゴは暗い背景で消える。モードごとに差し替えるか、単色でない版を用意する
影: 暗い背景では影がほとんど見えない。境界線や、背景よりわずかに明るい面で階層を表す
グラフや図: 明るい背景を前提に作った配色は、暗い背景では色の見え方が変わる

NOVEBLOには、ダークモードの切り替えを実装する手順をまとめたページがある。

AIコーディングとの関係

ダークモード対応はAIが得意な作業だが、任せきりにすると「色を反転しただけ」のコードが返ってきやすい。次の点を指示に含めるとよい。

OS設定に追従するか、ボタンで切り替えるか、両方か
選択を保存するか（LocalStorageを使うか）
色をCSS変数で管理してほしいこと
読み込み時のちらつき対策を入れてほしいこと

たとえば「CSS変数でライト・ダークの配色を定義し、prefers-color-scheme で初期値を決めたうえで、ボタンでも切り替えられるようにして。選択はLocalStorageに保存し、読み込み時のちらつきが出ないよう <head> で適用して」と伝えると、実用に足るものが出てくる。

生成後に自分で確認したいのはコントラストである。AIが提案する暗色の配色は、見た目は整っていても本文の文字が薄すぎることがある。ブラウザの開発者ツールにはコントラスト比を確認する機能があるので、本文と背景の組み合わせは必ず実際に測ってほしい。

よくある勘違い

ダークモードは目に良い？

「目が疲れにくい」と言われることは多いが、常に良いとは限らない。暗い場所ではまぶしさが減って快適だが、明るい場所ではむしろライトモードのほうが読みやすいという報告もある。環境によって適切な側が変わるため、どちらかを強制せず、利用者が選べるようにするのが望ましい。

色を反転させれば完成？

反転だけでは、薄いグレーの境界線が消えたり、白背景の画像が浮いたり、影が効かなくなったりする。ダークモードは配色を反転する作業ではなく、暗い背景を前提にもう一組の配色を設計する作業である。

バッテリー消費は必ず減る？

有機EL（OLED）画面では黒い画素が発光しないため、消費電力が下がることがある。ただし液晶（LCD）画面ではバックライトが常時点灯しているため、ほとんど変わらない。端末によって効果が異なる、と理解しておくのが正確である。

OSがダークならサイトも自動でダークになる？

prefers-color-scheme に対応したCSSを書いて初めて追従する。何も書かなければ、OSがダークでもサイトは白いままである。ブラウザが自動でページを暗くする機能を持つ場合もあるが、意図しない色になることがあるため、サイト側で明示的に対応するほうが確実である。

まとめ

ダークモードは、背景を暗色・文字を明色にして表示する配色モードである
色はCSS変数にまとめ、モードごとに変数の定義だけを差し替えると保守しやすい
OSの設定は prefers-color-scheme で読み取れる。サイト側の切り替えボタンと併用するのが親切である
選んだモードはLocalStorageなどに保存し、<head> の早い段階で適用してちらつきを防ぐ
真っ黒 + 真っ白は読みにくい。少し寄せた配色にし、コントラスト比を必ず確認する

情報ソース

より詳しくAIに聞いてみよう

ダークモードとは何かを、なぜ生まれたのかという背景も含めて初心者向けに説明してください。
prefers-color-scheme とサイト内の切り替えボタンを併用するとき、優先順位はどう設計するのがよいですか。
ダークモードで読みやすいコントラスト比の目安と、確認する方法を教えてください。
ダークモード対応で画像・ロゴ・影がうまく見えなくなる原因と、その対処法を教えてください。
AIにダークモードのコードを生成してもらうとき、読み込み時のちらつきを防ぐにはどう指示すればよいですか。