【CSS】ダークモード対応の具体的な実装方法｜色彩設計からアクセシビリティまで徹底解説
生徒最近、いろんなWebサイトでダークモードを見かけるんですけど、自分のサイトにも実装したいです！どうやって作ればいいんですか？
ペン博士よーく聞くんだぞ！ダークモードはユーザー体験を向上させる重要な機能じゃ。今日はCSSを使った実装方法から色彩設計まで、詳しく解説するぞい！
生徒ありがとうございます！よろしくお願いいたします！
近年、多くのWebサイトやアプリケーションでダークモード（ダークテーマ）が実装されています。AppleのiOS、macOS、GoogleのAndroid、WindowsなどのOSレベルでもダークモードが標準機能として提供され、ユーザーの間で急速に普及しています。
本記事では、CSSを使ったダークモードの実装方法について、基本的なprefers-color-schemeメディアクエリの使い方から、CSS変数を活用した高度な色彩管理、JavaScriptによる手動切り替え機能の実装、アクセシビリティへの配慮まで、実装例を交えながら詳しく解説します。
詳しくはこちらの記事をご覧ください。
あわせて読みたい
【転職希望者必見】受託開発の会社に内定！フルスタックエンジニアとして更なる高みを目指し挑戦中！
ペン博士！今回はどんな方がインタビューに応じてくださったんですか？ うむ。今回は受託開発の会社に内定をもらった方じゃぞ！しかもフルスタックエンジニアとしての採...
吉池さんの主な制作実績はこちら
目次
ダークモードとは？
ダークモード（Dark Mode）は、Webサイトやアプリケーションの背景を暗色にし、テキストを明色で表示する表示モードです。従来の白背景に黒文字という「ライトモード」とは逆の配色を採用します。
ダークモードが普及した背景
ダークモードが注目されるようになった背景には、以下のような要因があります。
・スマートフォンの普及 : 有機EL（OLED）ディスプレイでは、暗い画面の方が消費電力が少ない
・長時間の画面使用 : リモートワークの増加により、画面を見る時間が大幅に増加
・眼精疲労への配慮: 特に夜間や暗い環境での使用時に、眼の負担を軽減
・美的価値: 洗練された印象やプレミアム感の演出
・OSレベルのサポート: iOS 13、Android 10、Windows 10以降で標準機能化
ダークモードの種類
ダークモードには、大きく分けて以下の2つのタイプがあります。
1. 自動検出型（システム連動型）
- ユーザーのOS設定を自動的に検出
- `prefers-color-scheme`メディアクエリを使用
- ユーザーの設定に応じて自動的に切り替わる
2. 手動切り替え型
- Webサイト上のトグルボタンで切り替え
- JavaScriptとlocalStorageで設定を保存
- ユーザーが自由に選択可能
理想的なのは、両方を組み合わせた実装です。システム設定を尊重しつつ、サイト上での個別変更も可能にします。
生徒なるほど…
ダークモードって、ただ背景を黒くするだけじゃないんですね！
ペン博士うむ。
本質は「表示モードの切り替え」ではなく、光の使い方の設計なのじゃ！
ダークモードのメリット
1. 眼精疲労の軽減
ダークモードの最大のメリットは、眼の疲れを軽減できることです。特に以下のような状況で効果を発揮します：
- 夜間の使用: 暗い環境で明るい画面を見ると眼が疲れやすい
- 長時間の作業: ブルーライトの影響を低減
- 暗所での使用: 周囲の明るさとのコントラストを緩和
ただし、すべての人にとって眼に優しいわけではない点に注意が必要です。一部のユーザーは、暗い背景に明るいテキストの方が読みにくいと感じることもあります。
2. バッテリー寿命の延長
有機EL（OLED）ディスプレイを搭載したデバイスでは、ダークモードによってバッテリー消費を削減できます。
OLEDディスプレイの特性：
- 黒色のピクセルは完全にオフになる（発光しない）
- 白色表示時に比べて大幅に消費電力が少ない
- Google調査によれば、YouTubeアプリで最大60%の省電力効果
ただし、液晶（LCD）ディスプレイでは、バックライトが常時点灯しているため、この効果は限定的です。
3. コンテンツの視認性向上
画像や動画などのメディアコンテンツは、暗い背景の方が際立って見える傾向があります。以下のような場面で効果的です。
- 写真ギャラリー : 写真が浮き立つように見える
- 動画プレイヤー : YouTubeやNetflixなどが採用
- デザインポートフォリオ : 作品を引き立てる背景として
4. ブランドイメージの向上
ダークモードは、モダンで洗練された印象を与えます。特に以下のような業界・サービスで効果的です。
- テクノロジー企業 : 先進的なイメージ
- クリエイティブ業界 : スタイリッシュな印象
- ゲーミング : 没入感の向上
- 高級ブランド : プレミアム感の演出
5. アクセシビリティの向上
視覚に関する特定の症状を持つユーザーにとって、ダークモードはアクセシビリティの向上につながります：
- 光過敏症 : 明るい光に敏感な方
- 片頭痛 : 眩しさが引き金となる方
- 白内障術後 : まぶしさを感じやすい方
ただし、すべての障害に対して有効ではないため、ライトモードとダークモードの両方を提供することが重要です。
生徒目の疲れ軽減だけじゃなくて、
バッテリーや没入感にも関係するんですね。
ペン博士うむ。
メリットは「見た目」よりも、体験の質に現れるのじゃ！
ダークモードの主な実装方法
CSS実装方法1：prefers-color-schemeメディアクエリ
prefers-color-schemeは、ユーザーのOSレベルの配色設定を検出するCSSメディアクエリです。
対応ブラウザ（2026年2月時点）：
- Chrome 76以降
- Firefox 67以降
- Safari 12.1以降
- Edge 79以降
主要ブラウザはすべて対応しており、全世界のブラウザシェアの95%以上がサポートしています。
基本的な実装例
最もシンプルな実装方法は、ライトモードのスタイルをデフォルトとし、ダークモードを`prefers-color-scheme: dark`で上書きする方法です。
See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.
より詳細な実装例
実際のWebサイトでは、背景色とテキスト色だけでなく、リンク色、ボーダー色、シャドウなど、さまざまな要素の色を調整する必要があります。
See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.
この実装のメリット：
- CSS変数を一箇所で変更するだけで、全体の配色が切り替わる
- メンテナンスが容易
- コードの重複が最小限
- トランジション効果で滑らかに切り替わる
画像の扱い
ダークモードでは、画像の見え方にも配慮が必要です。特にロゴやアイコンは、背景色に応じて切り替えることが推奨されます。
See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.
CSS実装方法2：CSS変数（カスタムプロパティ）を活用した高度な管理
CSS変数（カスタムプロパティ）を使用すると、色の管理が一元化され、メンテナンス性が大幅に向上します。
メリット：
- 一箇所で色を管理 : 変数定義を変更するだけで全体に反映
- 命名による意味付け : `–bg-primary`のような意味のある名前で管理
- JavaScriptからの操作が容易 : 動的な色変更が可能
- 計算が可能 : `calc()`関数と組み合わせられる
セマンティックな変数命名
色の値そのものではなく、役割や用途に基づいた命名を行います。
/* 悪い例：色の値をそのまま命名 */
:root {
--white: #ffffff;
--black: #000000;
--gray-200: #e0e0e0;
--blue-500: #0066cc;
}/* 良い例：役割に基づいた命名 */
:root {
/* 背景色 */
--bg-primary: #ffffff;
--bg-secondary: #f5f5f5;
--bg-tertiary: #e8e8e8;
/* テキスト色 */
--text-primary: #333333;
--text-secondary: #666666;
--text-tertiary: #999999;
--text-inverse: #ffffff;
/* アクセントカラー */
--accent-primary: #0066cc;
--accent-hover: #0052a3;
--accent-active: #003d7a;
/* ステータス色 */
--success: #28a745;
--warning: #ffc107;
--error: #dc3545;
--info: #17a2b8;
/* UI要素 */
--border-color: #dddddd;
--divider-color: #e0e0e0;
--shadow-sm: rgba(0, 0, 0, 0.05);
--shadow-md: rgba(0, 0, 0, 0.1);
--shadow-lg: rgba(0, 0, 0, 0.15);
}
@media (prefers-color-scheme: dark) {
:root {
/* 背景色 */
--bg-primary: #1a1a1a;
--bg-secondary: #2d2d2d;
--bg-tertiary: #3a3a3a;
/* テキスト色 */
--text-primary: #e0e0e0;
--text-secondary: #b0b0b0;
--text-tertiary: #808080;
--text-inverse: #1a1a1a;
/* アクセントカラー */
--accent-primary: #4d9fff;
--accent-hover: #80b3ff;
--accent-active: #b3d1ff;
/* ステータス色（ダークモードでは彩度を調整） */
--success: #4ade80;
--warning: #fbbf24;
--error: #f87171;
--info: #38bdf8;
/* UI要素 */
--border-color: #404040;
--divider-color: #333333;
--shadow-sm: rgba(0, 0, 0, 0.3);
--shadow-md: rgba(0, 0, 0, 0.5);
--shadow-lg: rgba(0, 0, 0, 0.7);
}
}グラデーションとシャドウの調整
ダークモードでは、グラデーションやシャドウも調整する必要があります。
root {
/* ライトモード */
--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--gradient-hero: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1));
}
@media (prefers-color-scheme: dark) {
:root {
/* ダークモードでは少し明るめのグラデーション */
--gradient-primary: linear-gradient(135deg, #7c8ff5 0%, #8a5fb3 100%);
--gradient-hero: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.5));
}
}
.hero {
background: var(--gradient-hero);
}
.button-primary {
background: var(--gradient-primary);
}CSS実装方法3：JavaScriptによる手動切り替え
なぜ手動切り替えが必要か？
prefers-color-schemeだけでは、ユーザーがサイト上で自由にモードを切り替えることができません。理想的なユーザー体験のためには、以下の機能が必要です：
- トグルボタンでの切り替え : サイト内で即座に変更可能
- 設定の保存 : ページをリロードしても選択が維持される
- OS設定との協調 : 初回訪問時はOS設定を尊重、その後はユーザーの選択を優先
完全な実装例
以下は、OS設定の検出、手動切り替え、localStorage保存を組み合わせた実装例です。
See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.
より高度な実装：3つのモード対応
ライト・ダーク・システム設定の3つのモードを提供する実装例：
See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.
生徒CSSだけでできる方法から、JSを使う方法まであるんですね！
ペン博士うむ。
重要なのは「どう切り替えるか」より、どこまで制御するかじゃ！
色彩設計のベストプラクティス方法
1. 純粋な黒（#000000）を避ける
ダークモードでは、純粋な黒色の背景は避けるべきです。以下の理由があります：
- コントラストが強すぎる : 白テキストとのコントラストが強すぎて眼が疲れる
- 深度の表現が困難 : すべてが同じ黒だと、階層構造が表現できない
- 有機ELでの焼き付き : 長時間表示で画面焼き付きのリスク
推奨される背景色：
:root {
/* 良い例：ダークグレー系 */
--bg-dark-1: #1a1a1a; /* 最も暗い背景 */
--bg-dark-2: #2d2d2d; /* セカンダリ背景 */
--bg-dark-3: #3a3a3a; /* 浮き上がった要素 */
/* 悪い例 */
--bg-dark-bad: #000000; /* 純粋な黒は避ける */
}2. 適切なコントラスト比を維持
WCAG（Web Content Accessibility Guidelines）に準拠したコントラスト比を確保します：
- 通常テキスト : 最低 4.5:1
- 大きいテキスト : 最低 3:1
- AAA基準（推奨）: 通常テキスト 7:1、大きいテキスト 4.5:1
コントラストチェックツール：
- WebAIM Contrast Checker (https://webaim.org/resources/contrastchecker/)
- Chrome DevTools の Lighthouse
- Figma の Contrast Plugin
実装例
/* 悪い例：コントラスト不足 */
.bad-contrast {
background: #2d2d2d;
color: #4a4a4a; /* コントラスト比 1.7:1（不十分） */
}
/* 良い例：十分なコントラスト */
.good-contrast {
background: #1a1a1a;
color: #e0e0e0; /* コントラスト比 12:1（優秀） */
}3. 彩度を調整する
ダークモードでは、ライトモードと同じ彩度の色を使うと、眩しすぎることがあります。
:root {
/* ライトモード */
--primary-light: hsl(210, 100%, 50%); /* 鮮やかな青 */
--success-light: hsl(120, 100%, 35%); /* 鮮やかな緑 */
}
@media (prefers-color-scheme: dark) {
:root {
/* ダークモード：彩度を下げる */
--primary-light: hsl(210, 80%, 60%); /* やや淡い青 */
--success-light: hsl(120, 60%, 50%); /* やや淡い緑 */
}
}4. 階層構造を色の明度で表現
カードやモーダル、ドロップダウンなどの階層構造を、**背景色の明度差**で表現します。
[data-theme="dark"] {
--level-0: #0d0d0d; /* 最背面 */
--level-1: #1a1a1a; /* 通常の背景 */
--level-2: #2d2d2d; /* カード */
--level-3: #3a3a3a; /* モーダル */
--level-4: #474747; /* ドロップダウン */
}
.page-background {
background: var(--level-0);
}
.content-area {
background: var(--level-1);
}
.card {
background: var(--level-2);
}
.modal {
background: var(--level-3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}5. グレースケールのバリエーション
テキストの重要度に応じて、複数段階のグレーを用意します。
[data-theme="dark"] {
--text-primary: #e0e0e0; /* メインコンテンツ */
--text-secondary: #b0b0b0; /* 補足情報 */
--text-tertiary: #808080; /* キャプション */
--text-disabled: #505050; /* 無効化状態 */
}
h1, h2, h3 {
color: var(--text-primary);
}
p {
color: var(--text-secondary);
}
.caption {
color: var(--text-tertiary);
}
button:disabled {
color: var(--text-disabled);
}黒と白を反転させるだけじゃダメなんですね！
ペン博士そうじゃ。
ダークモードでは「コントラスト」と「彩度の抑制」が肝心なのじゃ！
アクセシビリティへの配慮した実践方法
1. forced-colors メディアクエリ
Windowsのハイコントラストモードなど、OSレベルで強制的にカラー設定が適用される環境に対応します。
@media (forced-colors: active) {
/* システムカラーを使用 */
body {
background-color: Canvas;
color: CanvasText;
}
a {
color: LinkText;
}
button {
border: 1px solid ButtonBorder;
background-color: ButtonFace;
color: ButtonText;
}
}2. prefers-contrast メディアクエリ
ユーザーが高コントラストを希望している場合に対応します。
@media (prefers-contrast: more) {
:root {
/* より強いコントラストを提供 */
--text-primary: #ffffff;
--bg-primary: #000000;
}
}
@media (prefers-contrast: less) {
:root {
/* 低コントラストを提供（光過敏症の方向け） */
--text-primary: #c0c0c0;
--bg-primary: #2a2a2a;
}
}
3. prefers-reduced-motion
アニメーションに敏感なユーザーへの配慮：
/* デフォルト：アニメーションあり */
* {
transition: background-color 0.3s ease, color 0.3s ease;
}
/* 動きを減らしたい場合：アニメーション無効化 */
@media (prefers-reduced-motion: reduce) {
* {
transition: none !important;
animation: none !important;
}
}4. キーボードナビゲーション
フォーカス状態を明確に表示：
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* ダークモードではより目立つフォーカスリング */
[data-theme="dark"] :focus-visible {
outline-color: var(--accent);
box-shadow: 0 0 0 3px rgba(77, 159, 255, 0.3);
}ダークモードでも、読めない人が出たら意味がないんですね。
ペン博士うむ。
誰かにとって快適であることと
誰にとっても使えることは別物なのじゃ！
よくある問題と解決方法
問題1: ページ読み込み時のフラッシュ（FOUC）
症状 : ページ読み込み時に、一瞬ライトモードが表示されてからダークモードに切り替わる。
原因 : JavaScriptの実行がDOMレンダリングより遅いため。
解決策 :“内でインラインスクリプトを実行：
See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.
問題2: 画像の見づらさ
症状 : ダークモードで写真が眩しすぎる、または暗すぎる。
解決策 : CSSフィルターで調整：
@media (prefers-color-scheme: dark) {
img {
/* 少し暗く、コントラストを下げる */
filter: brightness(0.9) contrast(0.9);
}
/* アイコンなどは反転 */
.icon {
filter: invert(1);
}
/* ロゴは個別対応 */
.logo {
filter: brightness(0) invert(1);
}
}問題3: SVGアイコンの色が変わらない
症状 : SVGファイル内で色が定義されており、CSSで上書きできない。
解決策 : SVGをインラインで埋め込むか、`currentColor`を使用：
See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.
問題4: 動画の周囲が眩しい
症状 : ダークモード時に動画プレイヤーの周囲が明るすぎる。
解決策 :ビデオ周囲に暗い背景を配置：
.video-container {
background: #000;
padding: 2rem;
border-radius: 8px;
}
video {
display: block;
width: 100%;
height: auto;
}ダークモードって、思ってたよりずっと奥が深いですね！
ペン博士うむ。
単なる配色切り替えではなく、
体験・設計・配慮の集合体なのじゃ！
生徒これからは
「とりあえず黒」じゃなくて、
理由を持ってダークモードを作れそうです！
ありがとうございました！
まとめ
本記事では、CSSを使ったダークモードの実装方法について、基本から応用まで詳しく解説しました。
重要なポイントは以下の通りです。
・prefers-color-schemeメディアクエリ: OS設定を自動検出し、ユーザーの好みに応じた表示を実現
・CSS変数の活用 : 一箇所で色を管理し、メンテナンス性を大幅に向上
・JavaScriptによる手動切り替え : トグルボタンとlocalStorageで、ユーザーが自由に選択可能
・色彩設計のベストプラクティス : 純粋な黒を避け、適切なコントラスト比と彩度を維持
・アクセシビリティ対応 : forced-colors、prefers-contrast、prefers-reduced-motionなど、多様なユーザーニーズに対応
・問題解決 : FOUC防止、画像調整、SVG対応など、実装時の注意点をカバー
ダークモードは、ユーザー体験を大幅に向上させる重要な機能です。適切な色彩設計とアクセシビリティ対応を組み合わせることで、すべてのユーザーに快適な閲覧体験を提供できます。
まずは`prefers-color-scheme`を使った基本的な実装から始め、徐々にJavaScriptによる手動切り替えや高度な色彩管理を追加していくことをおすすめします。ダークモードの実装は、モダンなWebサイトに不可欠な要素となっています。ぜひ実際のプロジェクトで活用してみてください。
WithCodeを体験できる初級コース公開中！
本記事でご紹介したダークモードの実装方法は、Web制作の実務で非常に重要なスキルです。WithCodeでは、こうした最新技術を含む実践的なWeb制作スキルを学べる環境を提供しています。
初級コース(¥49,800)が完全無料に！
- 期間：1週間
- 学習内容：
ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
→ 正しい学習方法で「確かな成長」を実感できるカリキュラム。
副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？
未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！
