一行代码使用CSS的黑暗模式

这是一个绝对不费吹灰之力的方法，将已经开发好的网站转换为支持黑暗模式。

话很少说，咱们开始吧! 👾

以这个新闻应用为例

如今添加魔术CSS

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

瞧！你完成了 ✌

实现黑暗模式

说明

如今，让咱们试着理解下面发生了什么。

CSS filter 属性将模糊或颜色转移等图形效果应用到元素上。滤镜一般用于调整图像、背景和边框的渲染。

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

invert滤镜能够帮助反转应用程序的颜色方案，所以，黑色变成了白色，白色变成了黑色，全部颜色也是如此。所以，黑变白，白变黑，全部颜色也是如此。

hue-rotate滤镜能够帮助咱们处理全部其余非黑白的颜色。将色调旋转180度，咱们确保应用程序的颜色主题不会改变，而只是减弱它的颜色。

这个方法惟一的问题是，它也会反转你应用程序中的全部图像。所以，咱们将对全部图像添加相同的规则来反转效果。

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

并且咱们还会给HTML元素添加一个过渡，确保过渡不会变得华而不实！

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

结果

---

来源：https://dev.to/akhilarjun/one...翻译：公众号《前端全栈开发者》