随着 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滤镜会把文字的颜色反转掉,我们更多时候想要的是亮度的变化而不是颜色直接反转,可以使用此滤镜实现

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