ダークモードとは

背景を黒系、文字を白系に切り替えて表示するテーマ。CSS 変数と data 属性の組み合わせで実装することが多い。

概要

背景を暗い色、文字を明るい色にして表示するテーマです。色をまとめて CSS 変数（カスタムプロパティ）で定義しておき、 <html> や <body> に付けた data-theme="dark" のような属性で参照する変数の値だけを切り替える実装がよく使われます。暗い場所での見やすさや目の疲れにくさを理由に好むユーザーが多く、ボタン 1 つで切り替えられるようにするのが一般的です。

別名

表記ゆれ：ダークモード、ダークテーマ、テーマ切り替え、prefers-color-scheme

「ダークモード」と「ダークテーマ」はほぼ同じ意味で使われ、どちらで伝えても通じます。

AI への伝え方

「ダークモードに対応して」「ダーク/ライト切り替えボタンを付けて」で伝わります。 OS の設定（prefers-color-scheme）に合わせて自動で切り替えるのか、ボタンでユーザーが手動で切り替えるのか、両方を組み合わせて OS の設定を初期値にしつつ手動でも上書きできるようにするのかを伝えると仕様がぶれません。色の切り替えに動きを付ける場合は、prefers-reduced-motion: reduce を尊重してアニメーションを止める配慮も必要です。

デモ

コード

HTML

<div class="dark-mode-demo" data-theme="light">
  <div class="dark-mode-demo__panel">
    <p class="dark-mode-demo__text">これはダークモードのデモです。ボタンで切り替えられます。</p>
    <button class="dark-mode-demo__button" type="button">ダークモードに切り替え</button>
  </div>
</div>

CSS

.dark-mode-demo {
  --dm-bg: #ffffff;
  --dm-fg: #333333;
  --dm-accent: #0017c1;
  box-sizing: border-box;
  min-height: 100vh;
  margin: -24px;
  padding: 24px;
  background: var(--dm-bg);
  color: var(--dm-fg);
  font-family: sans-serif;
  transition: background 0.3s ease, color 0.3s ease;
}

.dark-mode-demo[data-theme="dark"] {
  --dm-bg: #1a1a1a;
  --dm-fg: #f2f2f2;
  --dm-accent: #6b8bff;
}

.dark-mode-demo__panel {
  max-width: 320px;
}

.dark-mode-demo__text {
  margin: 0 0 16px;
  line-height: 1.7;
}

.dark-mode-demo__button {
  padding: 10px 20px;
  border: 0;
  border-radius: 8px;
  background: var(--dm-accent);
  color: #ffffff;
  cursor: pointer;
  font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .dark-mode-demo {
    transition: none;
  }
}

const stage = document.querySelector(".dark-mode-demo");
const button = document.querySelector(".dark-mode-demo__button");

button.addEventListener("click", () => {
  const next = stage.dataset.theme === "dark" ? "light" : "dark";
  stage.dataset.theme = next;
  button.textContent = next === "dark" ? "ライトモードに切り替え" : "ダークモードに切り替え";
});