ダークモードは、もはや「おまけ機能」ではありません。AppleもGoogleも標準サポートし、ユーザーの約8割がダークモードを好むというデータもあります。
本記事では、CSS変数（カスタムプロパティ）と prefers-color-scheme を使った、実践的なダークモード実装を解説します。
ステップ1：CSS変数でカラーを管理する
ダークモード実装の鍵は「色をハードコーディングしない」こと。すべての色をCSS変数として :root に定義しておけば、後からダークモードの色に切り替えるだけで済みます。
| 変数名 | ライト | ダーク |
|---|---|---|
| --color-bg | #FFFFFF | #1A1A2E |
| --color-text | #1A1A1A | #E0E0E0 |
| --color-card | #F9F6F2 | #0F3460 |
| --color-border | #EAEAEA | #333333 |
CSS
/* ライトモード（デフォルト） */
:root {
--color-bg: #FFFFFF;
--color-text: #1A1A1A;
--color-card: #F9F6F2;
--color-border: #EAEAEA;
}
/* ダークモード */
[data-theme="dark"] {
--color-bg: #1A1A2E;
--color-text: #E0E0E0;
--color-card: #0F3460;
--color-border: #333333;
}
ステップ2：OS設定を自動検知する
prefers-color-scheme メディアクエリを使えば、ユーザーのOS設定（ダークモード / ライトモード）を自動検知できます。
CSS
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #1A1A2E;
--color-text: #E0E0E0;
--color-card: #0F3460;
--color-border: #333333;
}
}
💡 ポイント：OS設定の自動検知だけでは「ユーザーが手動で切り替えたい」場合に対応できません。ステップ1の
[data-theme="dark"] 方式と組み合わせるのがベストプラクティスです。
ステップ3：トグルスイッチを実装する
ユーザーが手動でライト / ダークを切り替えられるトグルスイッチ。下のデモを切り替えてみてください。
☀️
🌙
Demo Site
記事タイトル
ダークモードとライトモードをワンクリックで切り替えられます。CSS変数を入れ替えるだけの簡単実装です。
カードコンポーネント
JavaScript
// テーマ切り替えトグル
const toggle = document.getElementById('theme-toggle');
toggle.addEventListener('click', () => {
const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
document.documentElement.setAttribute('data-theme', isDark ? 'light' : 'dark');
// ユーザーの選択をlocalStorageに保存
localStorage.setItem('theme', isDark ? 'light' : 'dark');
});
// ページ読み込み時に保存されたテーマを復元
const saved = localStorage.getItem('theme');
if (saved) {
document.documentElement.setAttribute('data-theme', saved);
}
ステップ4：画像もダークモードに対応させる
テキストの色だけ変えても、明るい背景の画像が浮いてしまうと台無しです。filter プロパティで画像の明度を下げるか、ダークモード用の画像を用意しましょう。
CSS
/* 方法1：filterで明度を下げる */
[data-theme="dark"] img {
filter: brightness(0.85);
}
/* 方法2：picture要素で画像を出し分け */
/* HTML側 */
/* <picture>
<source srcset="logo-dark.png"
media="(prefers-color-scheme: dark)">
<img src="logo-light.png" alt="Logo">
</picture> */
まとめ：ダークモードは「色の設計」から
効果的なダークモード実装のポイントをまとめます。
- CSS変数で色を一元管理 → 切り替えは変数の上書きだけ
- OS設定を自動検知 →
prefers-color-scheme - 手動切り替え →
data-theme属性 + localStorage - 画像の対応 → filter or picture要素
最も重要なのは「最初からCSS変数で設計する」こと。後からダークモードを追加するのは大変ですが、最初から変数化しておけば、変数を上書きするだけで完成します。
💡 ツタワルの制作では：ダークモード対応を含む「持続可能なCSS設計」をサイト構築の初期段階から組み込んでいます。運用フェーズでの追加コストを最小限に抑える設計が、私たちのこだわりです。
