css如何实现网站暗黑模式，看下这几种方案

文
章
目
录

• 一、暗黑模式简介
• 二、一行代码实现暗黑模式的方案
• 三、其他实现方案——light-dark()函数
• 四、方案对比与总结

暗黑模式已经成为许多网站和应用程序的常见功能，它不仅能提升用户在夜间或低光环境下的使用体验，还能减少眼睛疲劳，甚至在某些设备上节省电量。那么，如何高效地实现网站的暗黑模式呢？今天，咱们就来深入探讨一下这个话题，重点介绍一种仅用一行代码就能实现全网站暗黑模式的方法。

一、暗黑模式简介

暗黑模式，简单来说，是一种与传统亮色背景设计相反的用户色彩设计风格。它主要采用深色背景搭配浅色文字，比如在夜间浏览网页时，这种模式能让眼睛更加舒适。许多网站和应用都提供了暗黑模式选项，像大家熟悉的掘金网站，切换到暗黑模式后，整个页面风格会发生明显变化。

暗黑模式有不少优点。在低光环境下使用，它可以有效减轻眼睛的压力和疲劳感；对于部分用户而言，在暗色背景下阅读，文字的可视性更好，浏览网页会更加舒适；而且，对于移动设备来说，暗黑模式通过关闭黑色像素，还能减少屏幕耗电，延长电池续航时间。

以往，实现暗黑模式的传统方案通常是结合CSS变量、媒体查询以及监听系统主题变化事件来动态调整页面样式。例如下面这段代码：

/* 默认的亮色模式样式：light */
:root {
  --background-color: #ffffff;
  --text-color: #000000;
  --border-color: #d3d3d3;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  border-color: var(--border-color);
}

/* 暗黑模式的样式：dark */
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212;
    --text-color: #e0e0e0;
    --border-color: #3a3a3a;
  }
}

这种方式虽然能实现暗黑模式的切换，但存在一些明显的缺点。对于大型项目而言，要确保所有元素的颜色、背景等都适配暗黑模式，工作会变得十分复杂，维护成本很高；而且需要创建并维护两套样式表，一套用于亮色主题，另一套用于暗色主题，这无疑增加了代码量和项目的复杂性。

二、一行代码实现暗黑模式的方案

今天要给大家介绍一种超简单的方法，仅用一行核心代码就能实现全网站暗黑模式。先来看一下实现效果，以给掘金网站添加暗黑模式为例，应用该方法后，网站呈现出了不一样的视觉效果。

实现这一效果的核心代码是：

html {
  filter: invert(1) hue-rotate(180deg);
}

下面来详细解释一下这行代码的含义。CSS的filter属性可以对元素应用图形效果，像模糊、颜色偏移等效果都能实现。而filter: invert(1) hue-rotate(180deg)是一组特定的滤镜组合。其中，invert(1)函数的作用是反转输入图像中的颜色，参数“1”表示完全反转颜色，也就是黑色会变成白色，白色会变成黑色；hue-rotate(180deg)函数则是按照给定的角度（这里是180度）旋转色彩轮上的颜色，让颜色产生变化，比如红色会变成青色、绿色变成洋红色、蓝色变成黄色等。这两个函数结合起来，先通过invert(1)反转颜色，再用hue-rotate(180deg)调整色相，从而达到基本的暗黑效果。

不过，这种方法也存在一些问题。直接使用这行代码的话，图片、视频等媒体元素的颜色会变得很奇怪。为了解决这个问题，我们可以对这些不需要处理的元素再次使用filter: invert(1) hue-rotate(180deg)来复原它们的颜色。优化后的代码如下：

/*对设置data-theme=\'dark\'下的所有元素进行反转*/
[data-theme=\'dark\'] {
  filter: invert(1) hue-rotate(180deg);
  /*对不需要反转的元素进行复原，可按照自己需求追加*/
  img,
  video,
 .avatar,
 .image,
 .thumb
 .icon {
    filter: none;
  }
}

这样处理后，在暗黑模式下，图片等元素就能保持正常显示了。而且，filter属性的兼容性也不错，除了IE浏览器外，主流浏览器在较低版本下都支持，大家可以放心使用。

三、其他实现方案——light-dark()函数

除了上述使用filter滤镜的方法外，还有一种新的方案，就是使用light-dark()函数。这是在2024年5月新加入的一种CSS属性值函数，主要用于在浅色模式和深色模式下分别指定不同的样式值。

它的语法很简单，只需要传入两个值：light-dark(light-color, dark-color)。比如，想要分别设置在浅色模式和深色模式下不同的背景颜色和字体颜色，可以这样写代码：

:root {
  color-scheme: light dark;
}
body {
  color: light-dark(#333333, #f0f0f0);
  background-color: light-dark(#ffffff, #1e1e1e);
}

使用变量的话，代码会更加简洁：

:root {
  --bg-color: light-dark(#ffffff,  #1e1e1e);
  --text-color: light-dark(#333333,  #f0f0f0);
}

body {
  color: var(--text-color);
  background-color: var(--bg-color);
}

light-dark()函数为实现暗黑模式提供了新的选择，不过它也需要开发者分别声明元素在明亮模式和暗黑模式下的样式。目前，该函数在主流浏览器上基本都支持，但要注意不同浏览器的支持版本。

四、方案对比与总结

综合来看，传统的通过两套样式表来实现暗黑模式的方法，虽然原理简单，但代码量和维护成本高，不太推荐使用。

使用CSS滤镜filter的方案，虽然存在一些小瑕疵，比如对图片等元素需要额外处理，但它可以按需优化，而且代码量少，性价比很高，尤其适合已经开发完成的大型网站添加暗黑模式功能，强烈推荐大家使用。

而新的light-dark()函数，为实现暗黑模式增加了新的可能性，但同样需要编写不同的代码进行样式声明，推荐程度次之。具体选择哪种方案，还需要根据实际的项目情况来决定。如果是已经成型的网站，想要快速添加暗黑模式，filter滤镜方案无疑是最佳选择。

下面通过表格形式，更直观地对比一下这几种开发方式：

如果大家对暗黑模式的实现还有其他想法，或者在使用过程中有什么问题，欢迎在评论区一起讨论。要是想深入了解filter和light-dark()的相关知识，可以参考MDN文档，里面有更详细的内容。希望这篇文章能帮助大家更好地掌握网站暗黑模式的实现方法。