## 单行 CSS 实现页面黑暗模式

单行 CSS 实现 Dark Mode

主人公：filter

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

code

通过设置滤镜翻转和色彩旋转，实现 Dark Mode:

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

对于这种黑暗模式，我们将使用两个滤镜，即 invert 和 hue-rotate：

1. 反转滤镜有助于反转应用程序的配色方案。 因此，黑色变成白色，白色变成黑色，所有颜色都类似。
2. 色相旋转滤镜可以帮助处理所有其他非黑色和白色的颜色。将色相旋转 180 度，能够确保页面的颜色主题不会改变，而只是减弱其颜色。

这个方法的唯一缺点是，它还会反转应用程序中的所有图像。因此，需要将对所有图像添加相同的规则，以逆转效果:

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

同时还可以向 HTML 元素添加一个动画，以确保转换不会变得刻板：

html {
    transition: color 300ms, background-color 300ms;
}

demo