暗黑模式不是简单反色。它需要重新定义所有视觉层级，确保在深色背景上信息传达同样清晰有效。

设计原则

  • 深色背景降低屏幕亮度，减少长时间使用的视觉疲劳
  • 适合技术用户和开发者的工作环境
  • 保持与浅色模式一致的信息层级和交互逻辑
  • 不使用过亮的荧光色，避免在深色背景上刺眼

背景层级

深色模式的背景应形成清晰的深度层级：

Surface 900
页面底色
#0f172a
Surface 800
侧边栏、固定面板
#1e293b
Surface 700
卡片、模块容器
#334155
Surface 600
输入框、代码块
#475569
Surface 500
悬浮面板、下拉菜单
#64748b

层级之间通过明度差异区分，不依赖阴影。

文本层级

Primary
Primary Text
主标题、关键信息
#e5e7eb
Secondary
Secondary Text
正文、链接
#9ca3af
Tertiary
Tertiary Text
注释、辅助信息
#6b7280
Disabled
Disabled Text
不可用状态
#4b5563

关键规则：文本不使用纯白（#FFFFFF），纯白在深色背景上过于刺眼。

边框层级

Border Default
卡片边框
#334155
Border Elevated
分割线
#475569
Border Focus
聚焦边框（品牌色）
#5191fc
Border Subtle
低对比边框
#1e293b

边框使用与背景相近但更亮的颜色。

品牌色适配

品牌色在暗黑模式下需要适当调整：提高明度，降低饱和度。

浅色 vs 暗黑对比

浅色模式
Brand 500
#2d6ff2
Brand 600
#1a55db
Brand 50
#f0f5ff
暗黑模式
Brand 400
提高明度
#5191fc
Brand 300
链接、次级品牌色
#85b4fd
Brand 900
淡底替代色
#153170

品牌色按钮背景可使用原色，但文字需确保对比度足够。

代码块

  • 背景色使用 Surface 800 或更深
  • 语法高亮颜色需重新适配深色主题
  • 行号和注释使用低亮度灰色

表格

  • 表头背景使用 Surface 800
  • 偶数行使用 Surface 850 做斑马纹
  • 边框使用 Surface 600

图表

  • 图表背景透明或使用 Surface 900
  • 数据线条和填充使用亮色
  • 网格线使用 Surface 700
  • 标签使用 Secondary Text 颜色

Tailwind CSS 映射

以下是组件开发中常用的浅色/暗黑模式颜色映射：

浅色模式暗黑模式用途
bg-surface-50dark:bg-surface-900页面背景
bg-surface-100dark:bg-surface-800卡片、侧边栏
bg-whitedark:bg-surface-800容器、面板
bg-brand-50dark:bg-brand-900/30品牌色淡底
text-surface-900dark:text-surface-100主标题
text-surface-700dark:text-surface-200链接、次标题
text-surface-600dark:text-surface-300正文
text-brand-600dark:text-brand-400品牌色文字
border-surface-200dark:border-surface-700边框