前端暗黑模式适配的艺术与技巧

为什么暗黑模式适配能提升用户体验？

你是否注意到，自从 Vibe Coding 盛行之后，暗黑风格的网站数量激增，正如雨后春笋般涌现。

暂且不论这些网站是否带有浓厚的 AI 生成痕迹，核心问题在于——不少网站的暗黑模式体验令人视觉疲劳。这并非审美层面上的不协调，而是生理上的不适感，长时间注视后眼睛会出现酸涩、肿胀。

作为一名长期在暗黑模式下编写代码的前端开发者，我想深入探讨网页暗黑模式适配的实践技巧。以下是我在实际项目中总结出的经验与建议。

暗黑模式并非简单的黑白反转

这一点大多数开发者早已了然于胸。暗黑模式绝不仅仅是把背景设置为纯黑 #000——随便打开几个主流网站就能发现，它们从来不会采用纯黑色作为背景。

以下网站的左下角均标注了实际的背景色值：

但关键问题在于——仅仅将背景切换为深色就足够了吗？显然并不。

降低彩色饱和度以缓解视觉疲劳

在暗黑模式下，需要特别注意：应避免使用饱和度过高的颜色。高饱和度色彩在深色背景下会产生光学振动效应，导致眼睛迅速疲劳。

来看一个示例。这是一款明亮模式下饱和度较高的蓝色按钮：

如果直接将其置于暗黑模式中而不做任何调整，效果如下：

而下图展示的是降低主题色饱和度后的效果：

显而易见，降低饱和度后整体视觉舒适度显著提升。这也解释了为何主流 UI 框架中，一套主题通常配备两套独立的配色方案——一套用于明亮模式，另一套用于暗黑模式。

给图片/媒体元素加滤镜

颜色问题可以通过手动调整饱和度来解决，但图片该如何处理？特别是在图片社交类网站中，你无法预知用户会上传何种图片。

如果不加任何干预，暗黑模式下突然出现一张高亮度图片，效果如下：

一个实用的解决方案是为图片添加一行 CSS 滤镜：filter: brightness(.8) contrast(1.2);，手动降低图片亮度并增强对比度。这样既不影响图片的可读性，又能使其更好地融入暗黑氛围。

还可以在全局样式中直接定义，实现一劳永逸：

@media (prefers-color-scheme: dark) {
  /* 对图片及媒体元素进行降噪处理 */
  img:not([src$=".svg"]),
  video {
    filter: brightness(0.8) contrast(1.2);
    transition: filter 0.3s ease; /* 明暗切换时实现平滑过渡 */
  }
  /* 可选：鼠标悬停时恢复原始亮度，便于查看细节 */
  img:not([src$=".svg"]):hover {
    filter: none;
  }
}

如果是通过类名来切换明暗主题，可以这样写：

/* 根节点包含 .dark 类时生效 */
.dark img:not([src$=".svg"]),
.dark video {
  filter: brightness(0.8) contrast(1.2);
  transition: filter 0.3s ease;
}
/* 同样支持 Hover 恢复亮度 */
.dark img:not([src$=".svg"]):hover {
  filter: none;
}

避免使用阴影，改用色彩叠加

在传统明亮模式下，阴影是展现层级关系的重要工具。用户通过阴影的大小和模糊度，可以直观判断组件的前后层次——例如弹窗弹出时，底层页面投射的阴影就是典型应用。

但在暗黑模式下，依赖阴影表现层级的物理逻辑几乎失效。因为阴影的本质是光线被遮挡后产生的暗部，在深色背景上使用暗色阴影毫无意义；而强行使用亮色阴影，又会给人造成“发光”的错觉。

推荐采用色彩叠加法：将背景层设为最深色，置于其上方的元素则使用稍亮一些的色调，以此区分层次。

请务必牢记一个原则：层级越高，表面颜色越亮。一旦方向搞反，效果会适得其反。