随着 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
滤镜会把文字的颜色反转掉,我们更多时候想要的是亮度的变化而不是颜色直接反转,可以使用此滤镜实现
相关博文
一行代码实现网页暗黑模式