暗黑效果，主要是使用以下核心代码来实现 ：
html {
filter: invert(1) hue-rotate(180deg);
}
好神奇，解释一下以上这行代码是什么含义：
CSS 滤镜 filter 属性允许你对元素应用图形效果，如模糊或颜色偏移。而 filter: invert(1) hue-rotate(180deg) 是一组特定的滤镜组合，用来改变选定元素的颜色表现。
下面详细解释一下它代表的含义：
- invert(1) :
invert()函数用于反转输入图像中的颜色。参数定义了转换的程度。如果参数是 1（或者 100%），则会完全反转颜色，即每个颜色通道的值都会被替换为其补色。例如：黑色变成白色，白色变为黑色等。- 当使用
invert(1)时，则表示将图像的颜色彻底反转，即是：黑色变成白色，白色变为黑色。
- hue-rotate(180deg) :
hue-rotate()函数按照给定的角度旋转色彩轮上的颜色，其实就是冲淡颜色。这里的“角度”是指在标准色轮上转动多少度。色轮是一个圆形图表，显示了不同颜色如何根据它们的色调相互关联。- 当使用
hue-rotate(180deg)时，意味着所有颜色都会在其原始位置基础上沿着色轮顺时针方向移动 180 度。比如红色会变成青色、绿色变成洋红色、蓝色变成黄色等，因为这些是在色轮上相对的颜色。
结合起来看，首先通过 invert(1) 将图像的所有颜色都进行了反转处理，然后通过 hue-rotate(180deg) 再进行一次颜色的大幅度调整，这种组合可以产生非常独特的视觉效果。
所以，对于希望快速实现网站的暗黑模式，使用 CSS 的 filter 属性可以是一个非常简便的方法。通过 invert(1) 将颜色反转，再用 hue-rotate(180deg) 调整色相，可以达到一个基本的暗黑效果。
这种方法的优点是简单快捷， 但它也有缺点 ，因为它可能无法很好地处理图像和其他颜色复杂的内容。
比如：对于图片，如果直接使用 filter: invert(1) hue-rotate(180deg)，它的颜色会变得非常奇怪，比如下面这张图，对我的掘金个人主页进行使用，图片变成了如下的效果：
还能优化
其实不止图片，像一些媒体类型的元素，例如背景、图片、视频等，都是不能直接处理的，简单一些就是保持其原样就可以了。那么问题来了，由于我们是全局使用的滤镜效果，那么我们如何让图片保持原样呢？
因为 filter 是使用滤镜的反相和色相旋转实现，那么对这些媒体元素再次使用滤镜的反相和色相旋转就可以复原了。
因此我们对这些元素再次使用 filter: invert(1) hue-rotate(180deg) 来进行复原：
html {
filter: invert(1) hue-rotate(180deg);
}
/*图片、视频等元素不需要处理*/
img,
video,
.logo,
.icon /*可继续添加可以不用处理的元素*/ {
filter: invert(1) hue-rotate(180deg);
}
优化后我们再次看一下暗黑模式下图片，同样的图片它的效果如下：
从以上的效果图中可以看到图片效果已经好多了！
因此，我们总结一下方案：使用 filter 滤镜进行全局使用，对一些图片、视频、背景类等不需要使用滤镜的元素的进行复原。
总结下来代码如下：
/*对设置data-theme='dark'下的所有元素进行反转*/
[data-theme='dark'] {
filter: invert(1) hue-rotate(180deg);
/*对不需要反转的元素进行复原，可按照自己需求追加*/
img,
video,
.avatar,
.image,
.thumb
.icon {
filter: none;
}
}
怎么样？是不是很简单！
我们再来看一下 filter 的兼容性，除了 IE 外，主流浏览器在较低版本下都是支持了，所以我们可以放心的使用它，兼容性如下图所示：
三. 其他方案
除了以上介绍的实现方式，我们也可以使用另一个方案：light-dark()
详细了解：2024 年了！ CSS 终于加入了 light-dark 函数！
它在 MDN 文档上的简介如下：
light-dark() 是在 2024 年 5 月新加入的一种新的 CSS 属性值函数，主要用于在浅色模式和深色模式下分别指定不同的样式值。
它的语法也很简单，只需要传两个值：light-dark(light-color, dark-color)
例如，我们要分别设置在浅色模式和深色模式下不同的背景颜色和字体颜色：
- 在浅色模式下，背景色为白色（
#ffffff），字体为黑色（#333333） - 在深色模式下，背景色为深灰色（
#1e1e1e），字体为白色（#f0f0f0）
如下代码设置：
: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 为我们实现暗黑模式又新增了一种可能性，但是同样的也需要我们在书写代码时对元素的颜色进行声明，表明在明亮模式和暗黑模式下该如何展示！
虽然是 light-dark 刚加入的样式函数，但是它在主流浏览器上都是支持的，但是要注意下支持的版本，兼容性如下图所示：
四. 总结
传统的实现方式原理很简单，可能需要我们有两套模式：light（明亮） 和 dark（暗黑），再通过不同的状态（light 和 dark）使用不同的样式，从而达到不同的效果展示，无形中会增加了代码量和复杂度，不推荐！
虽然使用 CSS 滤镜 filter 的方案确实有 瑕疵 ，但是我们也是可以进行按需优化的，同时你要考虑代码量的话，它的性价比是非常高的！兼容性也不差，尤其适合已经开发完毕的大型网站进行暗黑模式切换，强烈推荐！
2024 年新加入的 light-dark() 是一种新的 CSS 属性值函数，用于在浅色模式和深色模式下分别指定不同的样式值，为我们实现暗黑模式增加了更多可能性，但是同样需要开发不同的代码进行声明，推荐次之！
当然，不同的场景下可能使用的方案选取也会有变化，如果是已经开发完毕的网站新增暗黑模式主题时，使用 CSS 滤镜 filter 的实现方式无疑是最快最有效的方式！
| 开发方式 | 方案 | 推荐指数 |
|---|---|---|
| 传统模式 | 两套样式表适配 | ⭐️ |
CSS 滤镜 filter |
一行核心代码实现<br/>filter: invert(1) hue-rotate(180deg) |
⭐️ ⭐️ ⭐️ ⭐️ ⭐️ |
CSS 函数 light-dark() |
使用变量和 light-dark() 函数 |
⭐️ ⭐️ ⭐️ |