【译】一行CSS实现暗黑模式在 CSS 中 filter 属性用于元素的图形效果，比如模糊或者色彩偏移，通常用于调整图

原文地址： dev.to/dv/dark-mod…

开始吧

暗黑模式可以仅通过一行代码实现，让我们看看是咋做的 🤔

以这个模板为例 🖥

现在加上神奇的 CSS

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

看，完成 ✌️！

暗黑模式生效了，但现在有些问题

那么现在让我们瞅瞅背后发生了啥

在 CSS 中 filter 属性用于元素的图形效果，比如模糊或者色彩偏移，通常用于调整图像、背景或者边框的渲染（参考：MDN 文档）。

为了实现暗黑模式，我们会用到名为 invert 和 hue-rotate 的两个滤镜

invert 可以帮我们反转应用的颜色。这样，我们的黑色会变成白色，白色变成黑色，并且其它所有颜色都类似。invert() 函数作为 filter 属性的值，接收 0 到 1 之间的数字，或者 0% 到 100% 之间的百分比。

hue-rotate 可以帮我们处理黑色及白色以外的颜色。通过将色相旋转 180 度，确保我们应用的整体主题不会被改变，只是减弱颜色就好。

这个方法唯一的缺陷在于，它还会反转我们项目中存在的所有图片和视频的颜色，所以我们需要为所有图片添加统一的规则去撤销这个效果。

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

然后我们添加一个 class 去为特定的标签撤销效果

.invert {
    filter: invert(1) hue-rotate(180deg);
}

最终结果 🧑‍💻

我们使用了 Bulma 实现暗黑模式的的样例，Bulma 是一个基于 Flexbox 的开源 CSS 框架。