ダークモード設計の判断軸 — 白を黒にするだけでは終わらない

反転は最悪

ライトモードの色を全部反転させると、ほぼ確実に読みづらいものができます。ダークモードはライトとは別の設計が必要。

3 つの軸

1. 背景は純黒にしない

#000000 ではなく #0E0E10 あたり。純黒は OLED で焼き付くし、コントラストが強すぎて読み疲れます。

2. テキストは純白にしない

#FFFFFF ではなく #E8E8EA あたり。コントラスト比 12〜14 が読みやすい上限。

3. アクセントカラーは彩度を落とす

ライトモードで #0F766E が美しい青緑でも、ダークでは目が痛い。彩度を 30% 落として #5B9A93 のような落ち着いた色に振り直す。

:root {
  --color-bg: #FFFFFF;
  --color-fg: #1A1A1A;
  --color-accent: #0F766E;
}
:root[data-theme="dark"] {
  --color-bg: #0E0E10;
  --color-fg: #E8E8EA;
  --color-accent: #5B9A93;
}

まとめ

ダークモードは「もう一つの世界」。ライトと同じトーンを反転して持ってきても破綻します。ペアで設計する前提で取り組む。