前端暗黑模式的适配艺术

前言

你有没有发现，Vibe Coding 流行后，出现了大量深色背景、暗黑模式的网站。

先不论它们 AI 味重不重，但有些网站的暗黑模式下，真的让人看着不舒服，是生理层面、看着的不舒服。

作为一个几乎各种软件都使用暗黑模式的前端开发者，我想聊聊关于前端网页暗黑模式适配上，我自己的一些技巧和个人开发经验。

暗黑模式不是黑白翻转

我相信这一点大部分开发者都无师自通了，暗黑模式不是把背景设置成 #000 这种纯黑，因为几乎所有支持暗黑模式的网站，背景都不是纯黑底的。

比如下面这些网站，左下角我标注了背景色值：

但只是给网站设置一个深色的背景，这就够了么？当然不。

降低彩色的饱和度

暗黑模式下还应该避免使用饱和色，因为饱和色在深色场景下会产生光学振动，结果就是会导致眼部视觉疲劳。

举个例子，这是默认明亮模式下按钮的主题色，是一个偏高饱和度的蓝色：

这是不做任何处理，直接把背景切换到暗黑模式：

而这是降低主题色饱和度后的效果：

很明显降低饱和度后，整体看着眼睛会更舒服。这也是为什么大部分UI框架一套主题通常都是搭配2套配色方案，分别用于明亮模式和暗黑模式。

另外还需要注意下，暗黑模式下，默认文字的颜色，也就是白色，也不建议直接使用 #fff 纯白，比如图中的白色就使用了 #fafafa 。

给图片/媒体元素加滤镜

颜色可以通过降低饱和度来控制，但图片怎么办？一些图片社交类的网站，你不知道会出现什么样的图片。

如果不会任何处理，就会像下面这样，在暗黑模式下出现一张高亮度的图片：

我的方案是给图片增加一行滤镜 CSS filter: brightness(.8) contrast(1.2);，手动给图片降噪，这样既不会影响阅读体验，同时也更适配暗黑模式。

甚至可以在全局定义，一劳永逸：

css 复制代码

@media (prefers-color-scheme: dark) {
  /* 针对图片、媒体元素进行降噪 */
  img:not([src$=".svg"]),
  video {
    filter: brightness(0.8) contrast(1.2);
    transition: filter 0.3s ease; /* 让亮暗切换时有丝滑的过渡动画 */
  }

  /* 可选：当鼠标悬停在图片上时，恢复 100% 亮度，方便用户看清细节 */
  img:not([src$=".svg"]):hover {
    filter: none;
  }
}

如果是通过类名实现明暗主题切换的，则可以这样：

css 复制代码

/* 当根节点包含 .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;
}

避坑：为什么要排除 .svg ？

很多网页的 Icon（比如点赞、购物车、箭头）都是纯色的内联 SVG 或 src="*.svg"。如果全局加了 brightness(0.8)，这些本来需要高亮显示的图标就会变得灰蒙蒙的，破坏了 UI 的精致感。通过 img:not( $src$=".svg"$ ) 过滤，可以精准只对文章配图、用户头像等"照片类"资源生效。

避免使用阴影

在传统的明亮模式下，阴影通常是用来表现层级关系的手段。通过阴影的大小和模糊度，可以让用户直观地感受到哪个组件在上方，哪个在下方（比如弹窗弹起时，底层的页面会留下阴影）。

但在暗黑模式下，"用阴影表现层级"的物理学逻辑彻底失效了（物理学不存在了！！！），因为阴影的本质是光线被遮挡后产生的暗部。但如果强行使用亮色阴影，又会产生"发光"错觉。

我的建议是采用色彩叠加法，也就是背景层是最暗的，放置在其顶部的元素应稍亮一些。

这里一定要注意，是层级越高，表面颜色越亮，如果不注意，效果可能会弄巧成拙。