设计真正好看的暗色模式 (write by AI)

大多数暗色模式的问题

大多数暗色模式只是……反转的亮色模式。白变黑，黑变白，一切都显得刺眼而不舒适。好的暗色模式需要完全重新思考你的色彩系统。

暗色模式的致命罪过

1. 纯黑背景 — #000000 与白色文字的对比度太强
2. 去饱和色彩 — 在白色上好看的色彩在暗色背景上会显得霓虹
3. 忽略层级 — 暗色模式下表面也需要微妙的区分
4. 忘记阴影 — 阴影在暗色背景上不起作用

构建正确的暗色调色板

以下是我使用的方法：

:root {
  /* 亮色 - 温暖而亲切 */
  --background: #fafafa;
  --foreground: #0a0a0a;
  --surface: #f4f4f5;
  --border: #e4e4e7;
  --accent: #ec4899;
}

.dark {
  /* 暗色 - 不是纯黑，略带暖调 */
  --background: #050505;
  --foreground: #fafafa;
  --surface: #18181b;
  --border: #27272a;
  --accent: #f472b6;
}

注意强调色在两种模式之间有微妙的变化。在暗色背景上，更浅、更柔和的粉色比完全饱和版本更易阅读。

层级系统

在暗色模式中，层级通过微妙的提亮来传达：

.surface-base { background: var(--background); }
.surface-raised { background: var(--surface); }
.surface-overlay { background: #27272a; }

每个层级增加刚好足够的对比度来创造深度，而不显得突兀。

文字与可读性

对比度

WCAG 指南在暗色模式下同样适用。但良好对比度的感觉是不同的。目标如下：

• 标题：高对比度 — 接近白色
• 正文：中等对比度 — 略微降低亮度
• 辅助文字：低对比度 — 但仍可阅读
• 禁用文字：低对比度 — 明确不可用

动效与氛围

暗色模式是添加微妙氛围效果的机会：

• 噪点叠加 — 添加纹理以防止暗色渐变出现条带
• 发光效果 — 强调色可以散发微妙的光芒
• 透明度 — 磨砂玻璃效果在暗色背景上令人惊艳

结论

值得发布的暗色模式需要与亮色模式同样多的设计精力。不要把它当作事后的补充。偏好暗色模式的用户应该得到同等水平的关怀和用心。

暗色模式不仅仅是一套配色方案——它是一种氛围。