一行代码实现网页暗黑模式

发表于 | 评论数： | 阅读次数：
本文字数： 1.3k | 阅读时长 ≈ 1 分钟

随着 iOS 13 暗黑模式的发布，前端又要开始忙适配了。那么有没有一劳永逸的方法呢？当然是有的，往下看：

1
2
3
html {
    filter: invert(100%) hue-rotate(180deg);
}

就是这么简单，点击下面的按钮尝试一下吧

如果不想给图片、视频应用暗黑模式，可以加上这么一条：

1
2
3
4
5
6
7
html {
    filter: invert(100%) hue-rotate(180deg);
}
img,
video {
    filter: invert(100%) hue-rotate(180deg);
}

获取系统是否处于暗黑模式下有两种方式：

媒体查询

1
2
3
4
5
@media (prefers-color-scheme: dark) {
    html {
        filter: invert(100%) hue-rotate(180deg);
    }
}

兼容性（截止到 2020 年 6 月）：

可以看出兼容性在安卓上不容乐观

js 方法

1
2
3
4
5
6
if (
    window.matchMedia &&
    window.matchMedia('(prefers-color-scheme: dark)').matches
) {
    // set style
}

原理解释

invert

mdn 地址：invert

作用：用来反转元素和图片的颜色，在100%的情况下会完全反转。如：黑->白，白->黑，#222->#ddd

hue-rotate

mdn 地址：hue-rotate

作用：旋转元素的色相。因为invert滤镜会把文字的颜色反转掉，我们更多时候想要的是亮度的变化而不是颜色直接反转，可以使用此滤镜实现