一行代码实现暗黑模式

发表于 | 分类于 ，

正常实现一个完善的暗黑模式主题通常需要维护两套颜色变量，并使用 JS 控制切换。

但有一种方法只需要一行 CSS 就能使网站加上一个暗黑模式的主题。

一行 CSS 代码

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

filter 的魔力

filter属性通常是将模糊或颜色偏移等图形效果应用于元素。

它就像是给整个网页加上了一层滤镜。上述代码中使用了两个滤镜函数。

invert

invert 用来反转输入图像，值为 100% 则图像完全反转。

hue-rotate

hue-rotate用来翻转输入图像，值设定图像会被调整的色环角度值。

这个方法虽然简单但并非完美。

如果所示:

原图

使用filter过滤后的图

因为是在 html 上直接添加的属性，所以导致 image、video、iframe 等内容也会被反转。

最简单快捷的修复方法，就是再将他们反转一次。

1
2
3
img, video, iframe {
  filter: invert(1) hue-rotate(180deg);
}

对特定的几个标签进行单独处理以后就可以在暗黑模式下正常显示。