ダークモードWebデザイン：ベストプラクティスと実装するガイド

ダークモードすでにから開発者設定演に変わる主ストリーム設計する期望。超たことがある 80% の開発者で其 IDE 中使用ダークモード，主に操作する系统今すべてを含む系统级ダークテーマ。用户期望Webサイトと適用する尊重彼らの設定。このガイドではた作成する有効ダークモード体验所需の設計する原すなわち、色彩理論、CSS実装とアクセシビリティ考慮する。

なぜダークモードとても重する必要がある

ダークモードだけでなく仅は审美選択する。それのために用户提供するた切实の良处。で低光環境中，暗色背景を通じて減らす屏幕发出の光量来减軽眼睛疲劳。に対して OLED と AMOLED 表示する屏，暗色ピクセル消耗の电量远少于明色ピクセル，延長た移动设备の电プール续航。ダークモードまだを通じて比較创造視覚的階層，する注意する力吸引まで内容と交互元素上。

しかし，実装する不時にのダークモードかもしれない比ないダークモードより糟糕。纯白文本と纯黒背景の間の高コントラストできるをもたらす光晕效应，即文本看起来模糊または发光。閉键は見つけるコントラストと舒適度なの間の正しく平衡。

ダークモードの色彩理論

ダークモードデザイン中最も一般的の間違いは簡単に反转浅色方案。これ種類方法理由は失敗，はなぜなら色感知で暗色背景上できる发生变化。で白色上看起来鲜艳の色で暗色サーフェス上かもしれない显て刺眼または压倒性，そして浅色シャドウ中の細微差异で暗色上变てできない见。

背景色

避ける使用纯黒色 (#000000) として背景。纯黒色と白色文本生み出す過度の比較，をもたらす眼睛疲劳。逆に，使用带あり軽微色调の深グレー，増やす奥行きと视觉趣味。

文本色

同样，避ける使用纯白色 (#ffffff) として正文文本。使用保持可読性同時に減らす眩光の米白色调。する纯白色予約に見出しと強调。

• メインテキスト：#e2e8f0 または #f1f5f9，舒适読む
• セカンダリテキスト：#94a3b8，に使用される説明するとタグ
• 無効テキスト：#64748b，に使用される非活动元素

アクセントカラー

アクセントカラー通常必要とするのためにダークモード入行调全体。で白色背景上效果良良の饱と色で暗色サーフェス上かもしれない看起来で振动。略微下げるアクセントカラーの彩度かつ増やす其明度，もってで不引き起こす视觉疲劳の情况下保持可见性。

CSS実装

最もメンテナンス可能のダークモード方法はCSSカスタムプロパティの使用（变量）配合 prefers-color-scheme 媒体クエリする。これは以下を許可しますあなた定義する一次色かつを通じてより変革する量值来切り替えるテーマ。

CSSカスタムプロパティの使用

:root {
  --bg: #f8fafc;
  --bg-card: #ffffff;
  --text: #1e293b;
  --text-muted: #64748b;
  --primary: #3b82f6;
  --border: #e2e8f0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --bg-card: #1e293b;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --primary: #60a5fa;
    --border: #334155;
  }
}

body {
  background: var(--bg);
  color: var(--text);
}

JavaScriptによる手動切替

だが prefers-color-scheme 処理する系统設定，用户も必要とする手动切り替える。する設定保存するで localStorage 中かつを通じて根元素上の data 属性適用する。

function toggleTheme() {
  const current = document.documentElement.dataset.theme;
  const next = current === 'dark' ? 'light' : 'dark';
  document.documentElement.dataset.theme = next;
  localStorage.setItem('theme', next);
}

// On page load
const saved = localStorage.getItem('theme');
if (saved) {
  document.documentElement.dataset.theme = saved;
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.documentElement.dataset.theme = 'dark';
}

それからで CSS 中と媒体クエリする方法一起使用属性選択する器：

[data-theme="dark"] {
  --bg: #0f172a;
  --bg-card: #1e293b;
  --text: #e2e8f0;
}

階層と奥行きの処理

でライトモード中，シャドウ传达階層。でダークモード中，シャドウで暗色サーフェス上不あまりにも可见。逆に，使用逐グラデーション浅の背景色来表示階層。毎一层应比其下一层稍浅，创造模仿光线落で浮き上がりサーフェス上の視覚的階層。

• レイヤー 0：ベース背景（最も深）
• レイヤー 1：カードとコンテナ（稍浅）
• レイヤー 2：浮动元素如ドロップダウン（より浅）
• レイヤー 3：模态框とダイアログ（最も浅の浮き上がりサーフェス）

ダークモードでの画像とメディア

明明の画像で暗色背景上かもしれない显て突兀。使用 CSS フィルターでダークモード中正画像略微下げる明度。に対して logo とアイコン，提供する浅色の代わりに代バージョン。

[data-theme="dark"] img {
  filter: brightness(0.9);
}

[data-theme="dark"] .logo-dark {
  display: inline-block;
}

[data-theme="dark"] .logo-light {
  display: none;
}

アクセシビリティ考慮する

ダークモード必須満たすとライトモード同じのアクセシビリティ標準。WCAG 2.1 ガイド要件通常テキストの最低コントラストのために 4.5:1，大きなテキストのために 3:1。使用コントラスト確認するツールテストするあなたのダークテーマもって確保する合规。

• 絶対にしないでください仅依赖色：使用アイコン、图案またはタグ配合色来传达情報。
• 使用屏幕読む器テストする：確保するテーマ切り替えるアクセス可能かつ播报其ステート。
• 尊重 prefers-reduced-motion：のために設定モーション削減の用户無効化またはモーション削減。
• 提供する十分なの焦点指示器：焦点环で两種類テーマ中すべて必須可见。使用比較鲜明の轮廓色。

常见のダークモード間違い

• 使用纯黒色背景：生み出す過度の比較と光晕效应。使用深グレー代の代わりに。
• 忘れる调全体シャドウ：暗色背景上の暗色シャドウできない见。使用より浅のサーフェス色表示階層。
• 無視する画像：暗色背景上の明明画像引き起こす视觉不协调。適用する明度フィルターまたは提供する暗色变体。
• ハードコードされた色：させるテーマ切り替える不可能。常にCSSカスタムプロパティの使用。
• ユーザー設定の非永続化：もしテーマでナビゲーション时リセット，用户できる感まで沮丧。する設定保存するで localStorage 中。
• スタイルなしコンテンツのフラッシュ (FOUC)：で CSS 前に使用内联脚本設定するテーマ，でページレンダリングする前生效。