几行 CSS 实现网站暗黑模式

html[theme='dark-mode'] {
  filter: invert(1) hue-rotate(180deg);
  img {
    filter: invert(1) hue-rotate(180deg);
  }
}

html {
  transition: color 300ms, background-color 300ms;
}
复制代码

1. 整个网站反转颜色

html[theme='dark-mode'] {
  filter: invert(1) hue-rotate(180deg);
}
复制代码

filter CSS 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。

对于暗黑模式，将使用两个 filter ：invert 和 hue-rotate

invert：反转配色。黑色变为白色，白色变为黑色，所有颜色都是如此

hue-rotate：帮助我们处理所有其他非黑色和白色的颜色。将色相旋转180度，我们确保应用程序的颜色主题不会改变，而只是减弱其颜色。

2. 再次反转图片的颜色

这个方法有个问题，它还会反转图像的颜色。所以，还要对所有图像添加相同的规则，以逆转效果。

html[theme='dark-mode'] img{
    filter: invert(1) hue-rotate(180deg);
}
复制代码

3. 还可以添加过渡效果

html {
    transition: color 300ms, background-color 300ms;
}
复制代码

最后，只需给你的 html 添加属性 theme，并赋值 dark-mode 就能应用这个样式了。而要实现切换效果只需 toggle 这个属性的值。当然你也可以用到任意的元素上，不一定是 html，这只是一个 css 规则。