单行CSS实现Dark Mode
主人公：
”filter
filterCSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。
code
通过设置滤镜翻转和色彩旋转，实现 Dark Mode:
html[theme='dark-mode'] {
filter: invert(1) hue-rotate(180deg);
}
对于这种黑暗模式，我们将使用两个滤镜，即invert和hue-rotate：
- 反转滤镜有助于反转应用程序的配色方案。 因此，黑色变成白色，白色变成黑色，所有颜色都类似。
- 色相旋转滤镜可以帮助处理所有其他非黑色和白色的颜色。将色相旋转180度，能够确保页面的颜色主题不会改变，而只是减弱其颜色。
这个方法的唯一缺点是，它还会反转应用程序中的所有图像。因此，需要将对所有图像添加相同的规则，以逆转效果:
html[theme='dark-mode'] img{
filter: invert(1) hue-rotate(180deg);
}
同时还可以向HTML元素添加一个动画，以确保转换不会变得刻板：
html {
transition: color 300ms, background-color 300ms;
}
demo
