在最近学习中突然看到了在媒体查询中prefers-color-scheme:dark监听的使用,然后就模仿里边写了个简单例子,代码如下:
body {background-color: #f5f5f5;}@media (prefers-color-scheme: dark) {body {background-color: #666;}}
然后通过修改系统的黑天白夜/浅色深色模式, body的背景色也跟着响应的变动了,这个跟现在各APP推出黑夜模式以及随系统改变白天白夜模式的功能息息相关啊,感觉到了这个属性的重要性就在caniuse中查了一下,不出所料咱们的老朋友IE仍不支持,不过对于移动端的小伙伴来说已经够用了。
然后根据查询到的资料整理了一个demo,有需要的朋友可以复制下来到运行一下看效果,要注意在页面中手动设置light和dark后需要清除或者刷新页面,不然body的变化会使得系统的变化体现不出来
系统的主题色设置为亮色或者暗色
- 浅色主题
- 暗色主题
- 清除手动设置的影响
注意:目前prefers-color-scheme的值只有light和dark两种模式,其他的仍为手动设置。