ダークモード対応は「色を切り替える」のではなく「テーマを切り替える」設計
ダークモードは、単に背景を黒くするだけではありません。
“ライトテーマ”と“ダークテーマ”という2つのテーマを切り替える設計 が本質です。
このテーマ切り替えを最も簡単に実現する方法が CSS変数（カスタムプロパティ）× class 切り替え。
Tailwind でもこの考え方がそのまま使えます。
ここでは、初心者でも迷わないように
CSS と Tailwind CSS の両方で、実務レベルのダークモード対応を丁寧に解説します。
ダークモード対応の基本構造
1. :root にライトテーマの変数を定義
2. .dark クラスでダークテーマの変数を上書き
3. HTML に .dark を付けるだけでテーマ切り替え
この3ステップだけで、サイト全体がダークモードに対応します。
CSS変数でライト/ダークテーマを切り替える（最重要パターン）
CSS 版
:root {
--color-bg: #ffffff;
--color-text: #1f2937;
--color-primary: #2563eb;
}
.dark {
--color-bg: #1f2937;
--color-text: #f3f4f6;
--color-primary: #3b82f6;
}
HTML（テーマ切り替え）
<body class="dark">
<p style="background: var(--color-bg); color: var(--color-text);">
ダークモード対応テキスト
</p>
</body>
深掘りポイント
CSS変数は「後から上書きできる」ため、
ダークモードのようなテーマ切り替えに最適です。
Tailwind の dark: より柔軟で、色数が多いプロジェクトに向いています。
Tailwind で CSS変数を使う（最も実務的）
Tailwind は任意値で CSS変数をそのまま使えます。
Tailwind 版
<div class="bg-[var(--color-bg)] text-[var(--color-text)] p-6 rounded">
<h1 class="text-3xl font-bold text-[var(--color-primary)]">
ダークモード対応
</h1>
</div>
深掘りポイント
Tailwind の bg-[var(--color-bg)] は
「Tailwind のユーティリティ × CSS変数」の最強コンビ。
Tailwind の dark: クラスで切り替える（簡単・小規模向け）
Tailwind にはダークモード専用の dark: プレフィックスがあります。
Tailwind 版
<div class="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-6 rounded">
Tailwind のダークモード
</div>
深掘りポイント
Tailwind の dark: は「色数が少ない UI」に向いています。
色が多いデザインでは CSS変数の方が管理しやすいです。
例1：ボタンのダークモード対応
CSS × Tailwind 版
:root {
--btn-bg: #2563eb;
--btn-text: #ffffff;
}
.dark {
--btn-bg: #1e40af;
--btn-text: #e5e7eb;
}
<button class="px-4 py-2 rounded bg-[var(--btn-bg)] text-[var(--btn-text)]">
ボタン
</button>
深掘りポイント
ボタンの色も CSS変数で管理すると、
ライト/ダークの切り替えが一瞬で済みます。
例2：カードコンポーネントのテーマ切り替え
CSS 版
:root {
--card-bg: #ffffff;
--card-border: #e5e7eb;
}
.dark {
--card-bg: #374151;
--card-border: #4b5563;
}
Tailwind 版
<div class="p-4 rounded border bg-[var(--card-bg)] border-[var(--card-border)]">
カード内容
</div>
深掘りポイント
コンポーネント単位で変数を上書きできるため、
「ライトでは白いカード、ダークでは濃いカード」が簡単に作れます。
例3：JavaScript でテーマを切り替える（実務で必須）
JS
document.documentElement.classList.toggle("dark");
Tailwind 版（HTML）
<button onclick="document.documentElement.classList.toggle('dark')"
class="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded">
テーマ切り替え
</button>
深掘りポイント
CSS変数と Tailwind の dark: はどちらも.dark クラスを付けるだけで切り替わるため、
JS での制御が非常に簡単です。
例4：システムのダークモードに自動追従する
CSS 版（メディアクエリ）
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #1f2937;
--color-text: #f3f4f6;
}
}
Tailwind 版（設定）
// tailwind.config.js
module.exports = {
darkMode: "media",
};
深掘りポイント
ユーザーの OS 設定に合わせることで、
より自然な UX を実現できます。
ダークモード設計のコツ（ここが一番大事）
1. 色は「意味」で管理する
× –blue
○ –color-primary
× –black
○ –color-bg
2. ダークモードは「色を反転」ではなく「コントラストを調整」
背景を暗くしたら文字は明るく、
アクセントカラーは少し彩度を落とすと美しい。
3. Tailwind の dark: は小規模向け
色が多いデザインは CSS変数が圧倒的に楽。
4. コンポーネント単位で変数を上書きできる
カード・ボタン・セクションごとにテーマを変えられる。
5. JS で .dark を付け替えるだけで切り替え完了
実装が非常にシンプル。
実務テンプレート：CSS変数 × Tailwind の最強ダークモード
CSS（global.css）
:root {
--color-bg: #ffffff;
--color-text: #1f2937;
--color-primary: #2563eb;
}
.dark {
--color-bg: #1f2937;
--color-text: #f3f4f6;
--color-primary: #3b82f6;
}
Tailwind（HTML）
<div class="min-h-screen bg-[var(--color-bg)] text-[var(--color-text)] p-8">
<h1 class="text-4xl font-bold text-[var(--color-primary)]">
ダークモード対応
</h1>
<button onclick="document.documentElement.classList.toggle('dark')"
class="mt-6 px-4 py-2 rounded bg-[var(--color-primary)] text-white">
テーマ切り替え
</button>
</div>
まとめ
ダークモード対応は
CSS変数 × .dark クラス × Tailwind の任意値
で最も柔軟かつ美しく実装できます。
ポイントは次の通りです。
- CSS変数でテーマを一元管理
- .dark クラスで値を上書き
- Tailwind の dark: も併用可能
- JS で
.darkを付け替えるだけで切り替え - 色は「意味」で管理すると拡張性が高い
