暗色模式网页设计：最佳实践与实现指南

暗色模式已经从开发者偏好演变为主流设计期望。超过 80% 的开发者在其 IDE 中使用暗色模式，主要操作系统现在都包含系统级暗色主题。用户期望网站和应用尊重他们的偏好。本指南涵盖了创建有效暗色模式体验所需的设计原则、色彩理论、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 之前使用内联脚本设置主题，在页面渲染前生效。