ダークモードと視覚的な快適さ

1）なぜ暗いテーマなのか

低い光、より少ないまぶしさおよび「ライト点滅」の目の慰め。
エネルギー：暗いスクリーンはOLED/AMOLEDにより少ない電池を使います。
データに焦点を当てる：背景ではなくコンテンツに焦点を当てる。
ユーザーの期待：システムフラグ'prefers-color-scheme'は事実上の標準です。

2）原則

1.暗い灰色の背景>UIの表面のための純粋な黒（よりよい可読性およびグラデーション）。
2.内容の対照：「黒で白い」ではなく、長いテキストのための柔らかい色合い。
3.慎重な「光度」：バックライト/アクセントはマフラーされていますが、区別できます。
4.シャドウ≠深さ：シャープなコントラストではなく、光/ぼやけた影で作業します。
5.可用性：WCAG AA（最小）、可視焦点および理解可能な状態。
6.システム設定は主にオートスイッチングと「減速ムーブメント」です。

3）パレットとトークン（例）

json
{
"mode": "dark",
"color": {
"bg": { "base": "#0E1116", "elev1": "#141821", "elev2": "#1A1F2B", "subtle": "#0B0E13" },
"fg": { "primary": "#E6E8EB", "muted": "#A6AEB8", "inverse": "#11131A" },
"accent": { "primary": "#6EA0FF", "warning": "#FFB547", "critical": "#FF6A6A", "success": "#66D19E" },
"border": { "soft": "#2A2F37", "strong": "#3A4150" },
"chart": { "a": "#6EA0FF", "b": "#66D19E", "c": "#FFB547", "d": "#C58CFF", "e": "#7DD3FC" }
},
"radius": { "sm": 8, "md": 12, "lg": 16 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.35)", "md": "0 6px 18px rgba(0,0,0,.45)" }
}

css
@media (prefers-color-scheme: dark) {
:root {
--bg-base:#0E1116; --bg-elev1:#141821; --bg-elev2:#1A1F2B;
--fg-primary:#E6E8EB; --fg-muted:#A6AEB8;
--accent:#6EA0FF; --warning:#FFB547; --critical:#FF6A6A; --success:#66D19E;
--bd-soft:#2A2F37; --bd-strong:#3A4150;
}
}

• ダークモードのアクセントは、ライトモードと比べて+8〜12％軽量です。
• グレースケール（4-5ステップ）を使用し、広い領域では絶対#000を避けます（例外-AMOLEDモード）。

4）テキストと読みやすさ

本文：ライトグレー'#E6E8EB'から'#0E1116'（コントラスト~ 12：1）。
二次テキスト：'#A6AEB8'；ヒント-1ステップ暗く/より透明。
長い読書：わずかに暖かい色合い（「ハロー」を減らす）。
リンク-デフォルトでアクセント+下線；色≠意味の唯一の媒体です。

5）表面、深さおよびガラス

立面図：'base'→'elev1'→'elev2'；各層は2-4％によってより軽く/より暖かいです。
影は柔らかく、広い、不透明度が低い。「光る」ストロークを避けます。
半透明なパネル（ぼかし）は適度に適切です；テキストとアンダーレイを対比します。
区切り文字は半薄い境界"--bd-soft'またはかろうじて見える"相続人"です。

6）状態および焦点

ホバー：+2-3％より軽い背景；アクティブ：− 2-3％（暗い）。
焦点：明確なリング（例えば。'アウトライン：2pxソリッド#6EA0FF；アウトラインオフセット：2px；'）、アクセントボタンで表示されます。
無効：慎重にコントラストを減らします。テキストの読み取り可能なレベルを下回らないでください。

7）ボタン、フォーム、テーブル

Primary： background '--accent'、 text'#0E1116'。
二次：背景'--bg-elev1'、ボーダー'--bd-strong'、テキスト'--fg-primary'。
入力フィールド：背景'--bg-elev1'、フォーカス付き-アクセントのボーダー；プレースホルダはdullerですが読み取り可能です。
表：ゼブラの背景はほとんど目立ちません。ホバーでの行の選択は+2-3％軽量です。

8）イラスト、ロゴ、写真

ロゴとピクトグラム-暗闇の反転バージョン。飽和させた背景の薄く、軽い線を避けて下さい。
写真：上に対照的なヘッダーのための暗いマスク（40-60％）を追加します。
アイコン：単一の厚さ、輪郭+充填-条件によって、ない「有毒な」色。

9）暗いテーマでのデータの可視化

行の色は適度な彩度です。少なくとも5つの異なるトーン。
グリッドと軸-ミュート（アルファ20-30％）、シグネチャ-'--fg-muted'。
注釈/インシデントは鮮明ですが読み取り可能です。色だけでなく、形/マーカーで下線を引きます。
空白のデータ/遅延-白いフィールドではなく、柔らかい「霧」。

10）性能および電池

OLEDは本当に純粋な黒（#000）を節約します-ユーザーオプションに従ってAMOLEDモードで使用します。
弱いGPUでは固体の大きな輝き/ぼやけを避けます。
リスペクト'prefers-reduced-motion'：アニメーション/トランジションを簡略化します。

11）動作と切り替え

デフォルトは'prefers-color-scheme'に従うことです。
ユーザーに明示的なスイッチ（Light/Dark/System）を与え、選択（Cookie/localStorage）を保持します。
テーマを変更する場合-フラッシュなし：レンダリング前にテーマクラスを事前に追加します。

html
<script>
const saved = localStorage. getItem('theme');
const sysDark = window. matchMedia?.('(prefers-color-scheme: dark)'). matches;
document. documentElement. dataset. theme = saved?? (sysDark? 'dark': 'light');
</script>

12）空室状況（A11y）

テキストコントラスト≥ 4。5：1（通常）、≥ 3：1（大）。
色のみで状態をエンコードしないでください：アイコン/パターン/署名を使用します。
フォーカススタイルとキーボードナビゲーションは必須です。
VoiceOver/TalkBack：ロール、ラベル、タバキュー。

13）アンチパターン

大面積の絶対に黒い背景に絶対に白いテキスト-「ちらつき」と疲労。
暗闇のネオンアクセント-「ライトノイズ」。
ハイコントラストの影（硬いボーダーで黒に灰色）。
マスクなしで写真の透明なテキスト。
プレースホルダの消失（アルファが低すぎる）。

14）部品の例

［ボタン］

css
.button {
background: var(--accent); color: var(--bg-base);
border-radius: 12px; padding: 10px 16px;
box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.button:hover { filter: brightness(1. 06); }
.button:active { filter: brightness(.94); }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

カード

css
.card {
background: var(--bg-elev1); border: 1px solid var(--bd-soft); border-radius: 12px;
box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

15）テストプラン

照明：暗い部屋/日光/通りの夜。
デバイス：OLEDとIPS、モバイル/デスクトップ、異なる密度。
A11y：コントラストチェッカー、キーボードパス、プレースホルダの可読性。
知覚：夜間にabテスト「目の疲労」と入力エラー。
パフォーマンス：暗いテーマを含む後のRUMメトリック（INP/CLS）；GPU負荷（ぼかし/シャドウエフェクト）。

16）品質指標

要素Violations/1kコントラスト（ターゲット：→0）。
苦情「暗すぎる/明るい」。
ナイトセッションの完了（セッション22：00-06：00までの行動指標）。
Dark ModeとLightのINP/CLS p75（基本より悪くない）。
オプトインダークモードとテーマを選択したユーザーの保持。

17）チェックリストを起動する

• 4-5表面レベルのダークテーマパレット
• テキスト/アイコン/境界のコントラストはWCAG AAに対応
• 目に見えるフォーカススタイルと状態（ホバー/アクティブ/無効）
• ロゴ/アイコン/写真、追加された写真のマスク
• グラフ-ミュートされたグリッド、読み取り可能なキャプション、非毒性の行
• 「フラッシュ」なしで選択を節約するライト/ダーク/システムスイッチ"
• 'prefers-color-scheme'と'prefers-reduced-motion'の尊重'
• RUM/perf-dashboard、回帰アラート

18）実施計画（3回繰り返し）

反復1-財団（1-2週間）

パレット/トークン、ベースサーフェス（base/elev1/elev2）、テキスト/ボーダー、ボタン/フィールド/テーブル、テーマスイッチ。

イテレーション2-粒度（3〜4週間）

暗闇の中のグラフやイラスト、写真のマスク、フォーカス/ステート、減動、perf-auditを考慮したアニメーション。

イテレーション3-最適化（連続）

オプションとしてAMOLEDモード、微調整コントラスト、夜間のユーザビリティテスト、Light vs Dark RUM比較、通常のブランド/UX監査。

19） ミニFAQ

純粋な黒の背景を作るべきですか？
UIの場合、深いダークグレーの方が良いです。「AMOLEDモード」オプションで純粋な#000を残します。

アクセントの彩度を上げる必要がありますか？
暗闇では-通常、逆に、わずかに明るくなり、彩度を減らして「輝き」しないようにします。

バナー画像はどうですか？
暗い背景/マスクを追加し、テキストとロゴのコントラストを確認します。

合計

暗いテーマは色の反転ではなく、思慮深いパレット、表面レベル、可読性、正しい状態、適応されたグラフィックスとメディア、システム設定の尊重という別のデザインモードです。トークンのリーン、コントラストとパフォーマンスのコントロール、そしてダークモードは、夜間と昼間のユーザーにとって便利で安定した美しいツールです。