共计 645 个字符，预计需要花费 2 分钟才能阅读完成。
这是一个相对不费吹灰之力的办法，将曾经开发好的网站转换为反对光明模式。
话不多说，咱们开始吧! ????
以这个新闻利用为例
当初增加魔术 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…
翻译：公众号《前端全栈开发者》
正文完