翻译自：https://dev.to/akhilarjun/one-line-dark-mode-using-css-24licss
本文将介绍一种简单易懂的方法实现网站暗黑模式html
话很少说，咱们开始吧！👾vue
如下面新闻应用程序为例👇：web
如今仅需增长如下一行魔法 CSS：微信
html[theme='dark-mode'] {
filter: invert(1) hue-rotate(180deg);
}
添加完成后页面展现效果：编辑器
哇偶！瞬间转换成暗黑模式有没有✌️
解析
filter CSS 属性将模糊或颜色偏移等图形效果应用于元素。滤镜一般用于调整图像，背景和边框的渲染。（参考：MDN Web文档）flex
对于暗黑模式，将使用两个 filter ：invert 和 hue-rotate网站
invert：反转配色。黑色变为白色，白色变为黑色，全部颜色都是如此spa
hue-rotate：帮助咱们处理全部其余非黑色和白色的颜色。将色相旋转180度，咱们确保应用程序的颜色主题不会改变，而只是减弱其颜色。.net
这个方法的惟一缺点是，它还会反转应用程序中的全部图像。
所以，咱们将对全部图像添加相同的规则，以逆转效果。
html[theme='dark-mode'] img{
filter: invert(1) hue-rotate(180deg);
}
咱们还将向HTML元素添加一个 transition ，以确保过渡不会过于花哨!
html {
transition: color 300ms, background-color 300ms;
}
实现结果👇：
本文分享自微信公众号 - Vue中文社区（vue_fe）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。