一行 CSS 为网页添加暗黑模式支持

翻译自：https://dev.to/akhilarjun/one-line-dark-mode-using-css-24li

本文将介绍一种简单易懂的方法实现网站暗黑模式

话不多说，我们开始吧！????

以下面新闻应用程序为例????：

现在仅需增加以下一行魔法 CSS：

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

添加完成后页面展示效果：

哇偶！瞬间转换成暗黑模式有没有✌️

解析

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

对于暗黑模式，将使用两个 filter ：invert 和 hue-rotate

invert：反转配色。黑色变为白色，白色变为黑色，所有颜色都是如此

hue-rotate：帮助我们处理所有其他非黑色和白色的颜色。将色相旋转180度，我们确保应用程序的颜色主题不会改变，而只是减弱其颜色。

这个方法的唯一缺点是，它还会反转应用程序中的所有图像。

因此，我们将对所有图像添加相同的规则，以逆转效果。

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

我们还将向HTML元素添加一个 transition ，以确保过渡不会过于花哨!

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

实现结果????：

最后

欢迎关注「前端瓶子君」，回复「交流」加入前端交流群！

欢迎关注「前端瓶子君」，回复「算法」自动加入，从0到1构建完整的数据结构与算法体系！

在这里，瓶子君不仅介绍算法，还将算法与前端各个领域进行结合，包括浏览器、HTTP、V8、React、Vue源码等。

在这里（算法群），你可以每天学习一道大厂算法编程题（阿里、腾讯、百度、字节等等）或 leetcode，瓶子君都会在第二天解答哟！

另外，每周还有手写源码题，瓶子君也会解答哟！

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持