深色模式配色方案设计指南

← 返回博客

深色模式配色方案设计指南

· 6 分钟阅读

深色模式不是简单反转颜色

最常见的深色模式错误是简单地把浅色主题的颜色反转（把白色变黑色，把黑色变白色）。这种方法会导致颜色对比度失调、饱和色过于刺眼、投影效果消失等问题。好的深色模式需要重新设计颜色系统，而不只是翻转数值。

深色模式背景的层次系统

深色模式需要至少 3–4 个层次的背景颜色，通过微小的亮度差异来区分不同的 UI 层级（这与浅色模式的道理相同，只是方向相反）。使用稍带品牌色调的深灰色而非纯黑色：

/* Dark mode background hierarchy */
--dark-bg-base:     hsl(220, 15%, 7%);  /* Deepest: page bg */
--dark-bg-elevated: hsl(220, 15%, 11%); /* Cards, sidebars */
--dark-bg-overlay:  hsl(220, 15%, 15%); /* Dropdowns, modals */
--dark-bg-raised:   hsl(220, 15%, 19%); /* Hover states, inputs */

/* NOT: */
--dark-bg: #000000;  /* Pure black - avoid */

为什么避免纯黑背景

纯黑背景（#000000）存在几个问题：与亮色内容的对比度过高，长时间阅读会导致"光晕效应"（在眼睛中产生明亮文字的残影）；在 OLED 屏幕上虽然省电，但视觉上会显得生硬；阴影和深度感无法通过更深的颜色来表达。Google Material Design 推荐使用 #121212 作为深色主题基础背景。

深色模式中的品牌色调整

浅色模式下的品牌主色在深色模式中通常需要提高亮度，原因是：同样的颜色在深色背景上看起来比在浅色背景上暗，而且深色背景上需要更高的对比度以确保可读性。使用 HSL 可以轻松实现这种调整：

:root {
  /* Light mode */
  --primary: hsl(214, 72%, 52%);  /* Standard blue */
  --primary-text: hsl(214, 72%, 40%);  /* Darker for text on white */
}

[data-theme="dark"] {
  /* Dark mode: increase lightness */
  --primary: hsl(214, 80%, 65%);  /* Brighter blue */
  --primary-text: hsl(214, 80%, 70%);  /* Even brighter for text on dark */
}

深色模式的文字颜色

同样，深色模式下的文字不应该是纯白色（#FFFFFF），而应该是稍带品牌色调的浅灰色。不同重要程度的文字使用不同的亮度：

[data-theme="dark"] {
  /* Primary text: high importance */
  --text-primary:   hsl(220, 20%, 92%);  /* Near white, slightly tinted */

  /* Secondary text: medium importance */
  --text-secondary: hsl(220, 15%, 70%);  /* Light gray */

  /* Tertiary/muted text: low importance */
  --text-muted:     hsl(220, 12%, 50%);  /* Medium gray */

  /* Disabled text */
  --text-disabled:  hsl(220, 10%, 35%);  /* Dark gray */
}

深色模式的阴影与高光

在浅色模式下，投影（box-shadow）是表达深度和层级的常用方法。但在深色模式中，投影几乎不可见（暗色背景上的暗色阴影）。有两种替代方案：一是用"高亮边框"代替投影（顶部边框比其他边框稍亮，模拟光源从上方照射），二是用背景色差异表达层级（如前面介绍的背景层次系统）。

[data-theme="dark"] {
  /* Replace shadows with subtle elevation */
  .card {
    background: var(--dark-bg-elevated);
    box-shadow: none;
    border: 1px solid hsl(220, 15%, 22%);
    /* Optional: subtle top highlight */
    border-top-color: hsl(220, 15%, 26%);
  }
}

语义色在深色模式中的调整

成功、警告、错误等语义色在深色模式中也需要调整，以确保在深色背景上足够清晰且不过于刺眼：

/* Light mode semantic colors */
--success: hsl(142, 65%, 40%);   /* Slightly dark green */
--error:   hsl(0,   70%, 48%);   /* Slightly dark red */
--warning: hsl(38,  90%, 45%);   /* Slightly dark orange */

/* Dark mode: brighter versions */
[data-theme="dark"] {
  --success: hsl(142, 60%, 55%);  /* Brighter green */
  --error:   hsl(0,   75%, 62%);  /* Brighter red */
  --warning: hsl(38,  85%, 60%);  /* Brighter orange */
}

测试深色模式的关键检查点

• 在真实 OLED 屏幕上查看（深黑色和高亮的对比在不同屏幕上效果差异很大）
• 检查所有文字/背景组合的对比度（深色模式下同样需要符合 WCAG 标准）
• 验证图片在深色背景上的边缘融合（白色背景的图片在深色模式下会有明显的白色边框）
• 测试深色模式下的表单控件（输入框、选择框等系统默认样式可能与你的深色主题冲突）

立即尝试在线工具，无需安装，免费使用。

打开工具 →