- prefers-color-scheme は「ユーザーの OS 設定に自動で合わせる」ための最強ダークモード技術
- prefers-color-scheme の基本
- 例1：背景と文字色を自動で切り替える（CSS）
- 例2：CSS変数と組み合わせる（最も実務的）
- Tailwind で prefers-color-scheme を使う
- 方法1：Tailwind の darkMode を “media” にする（自動追従）
- 方法2：CSS変数 × Tailwind の任意値（最強の組み合わせ）
- 例3：ボタンを prefers-color-scheme で切り替える
- 例4：カードコンポーネントの自動テーマ切り替え
- 例5：prefers-color-scheme と .dark クラスを併用する（上級者向け）
- prefers-color-scheme の設計ポイント（ここが一番大事）
- 実務テンプレート：CSS変数 × prefers-color-scheme × Tailwind
- まとめ
prefers-color-scheme は「ユーザーの OS 設定に自動で合わせる」ための最強ダークモード技術
ダークモード対応には
「ユーザーがライト/ダークを選ぶ」
「OS の設定に自動で合わせる」
という2つの方向があります。
そのうち OS の設定に自動追従する仕組み がprefers-color-scheme です。
これを使うと、ユーザーが macOS / Windows / iOS / Android で
「ダークモード ON」にしている場合、
あなたのサイトも自動でダークモードになります。
ここでは CSS と Tailwind CSS の両方で、
初心者でも迷わないように丁寧に解説します。
prefers-color-scheme の基本
使い方は「メディアクエリ」で条件分岐するだけ
@media (prefers-color-scheme: dark) {
/* ダークモード用のスタイル */
}
@media (prefers-color-scheme: light) {
/* ライトモード用のスタイル */
}
ユーザーの OS 設定に応じて自動で切り替わります。
例1：背景と文字色を自動で切り替える（CSS）
CSS 版
body {
background: #ffffff;
color: #1f2937;
}
@media (prefers-color-scheme: dark) {
body {
background: #1f2937;
color: #f3f4f6;
}
}
深掘りポイント
ユーザーが OS をダークモードにしている場合だけ
下のスタイルが自動で適用されます。
例2：CSS変数と組み合わせる（最も実務的）
CSS 版
:root {
--color-bg: #ffffff;
--color-text: #1f2937;
--color-primary: #2563eb;
}
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #1f2937;
--color-text: #f3f4f6;
--color-primary: #3b82f6;
}
}
HTML 使用例
<div style="background: var(--color-bg); color: var(--color-text);">
自動ダークモード対応
</div>
深掘りポイント
CSS変数を使うと、
テーマ切り替えが「変数の上書き」だけで完了 します。
Tailwind とも相性抜群。
Tailwind で prefers-color-scheme を使う
Tailwind には2つの方法があります。
方法1：Tailwind の darkMode を “media” にする（自動追従）
tailwind.config.js
module.exports = {
darkMode: "media", // OS 設定に自動追従
};
HTML
<div class="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-6 rounded">
Tailwind 自動ダークモード
</div>
深掘りポイントdarkMode: "media" にするとdark: クラスが OS の設定に自動で反応します。
方法2：CSS変数 × Tailwind の任意値（最強の組み合わせ）
CSS 版
:root {
--bg: #ffffff;
--text: #1f2937;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #1f2937;
--text: #f3f4f6;
}
}
Tailwind 版
<div class="bg-[var(--bg)] text-[var(--text)] p-6 rounded">
CSS変数 × Tailwind の自動ダークモード
</div>
深掘りポイント
Tailwind の dark: を使わず、
CSS変数だけでテーマを切り替える方法です。
色数が多いデザインではこちらが圧倒的に楽。
例3：ボタンを prefers-color-scheme で切り替える
CSS 版
:root {
--btn-bg: #2563eb;
--btn-text: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root {
--btn-bg: #1e40af;
--btn-text: #e5e7eb;
}
}
Tailwind 版
<button class="px-4 py-2 rounded bg-[var(--btn-bg)] text-[var(--btn-text)]">
自動ダークボタン
</button>
例4：カードコンポーネントの自動テーマ切り替え
CSS 版
:root {
--card-bg: #ffffff;
--card-border: #e5e7eb;
}
@media (prefers-color-scheme: dark) {
:root {
--card-bg: #374151;
--card-border: #4b5563;
}
}
Tailwind 版
<div class="p-4 rounded border bg-[var(--card-bg)] border-[var(--card-border)]">
カード内容
</div>
例5：prefers-color-scheme と .dark クラスを併用する（上級者向け）
CSS 版
:root {
--bg: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #1f2937;
}
}
.dark {
--bg: #0f172a; /* 手動ダークモードはさらに濃いテーマに */
}
Tailwind 版
<div class="bg-[var(--bg)] p-6 rounded">
自動 + 手動のハイブリッドダークモード
</div>
深掘りポイント
OS に合わせつつ、
ユーザーが手動で「もっと暗いテーマ」を選べるようにできます。
prefers-color-scheme の設計ポイント（ここが一番大事）
1. OS の設定に合わせるだけで UX が向上
ユーザーが「ダークモード派」なら自動で暗くなる。
2. CSS変数と組み合わせると最強
色・余白・影など、すべて変数で管理できる。
3. Tailwind の darkMode: “media” は簡単
小規模サイトならこれだけで十分。
4. 手動切り替え（.dark）と併用できる
自動 + 手動のハイブリッドが最も実務的。
5. 色は「意味」で管理する
–color-bg
–color-text
–color-primary
など、意味ベースで変数名を付けると拡張性が高い。
実務テンプレート：CSS変数 × prefers-color-scheme × Tailwind
CSS（global.css）
:root {
--bg: #ffffff;
--text: #1f2937;
--primary: #2563eb;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #1f2937;
--text: #f3f4f6;
--primary: #3b82f6;
}
}
Tailwind（HTML）
<div class="min-h-screen bg-[var(--bg)] text-[var(--text)] p-8">
<h1 class="text-4xl font-bold text-[var(--primary)]">
prefers-color-scheme 対応
</h1>
<p class="mt-4">
OS の設定に合わせて自動でライト/ダークが切り替わります。
</p>
</div>
まとめ
prefers-color-scheme は
ユーザーの OS 設定に自動で合わせるダークモード技術 です。
ポイントは次の通りです。
- メディアクエリでライト/ダークを自動切り替え
- CSS変数と組み合わせると最強
- Tailwind の darkMode: “media” で簡単に使える
- 手動切り替え（.dark）と併用も可能
- 色は「意味」で管理すると拡張性が高い
