CSS媒体查询@media (prefers-color-scheme:dark)判断系统白天黑夜模式_资讯

CSS媒体查询@media (prefers-color-scheme:dark)判断系统白天黑夜模式

创始人

2024-06-01 23:33:48

前言

在最近学习中突然看到了在媒体查询中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两种模式，其他的仍为手动设置。

上一篇：基于SpringCloud的微服务架构学习笔记（3）注册中心和配置中心Nacos

下一篇：知识图谱之py2neo

CSS媒体查询@media (prefers-color-scheme:dark)判断系统白天黑夜模式

前言

相关内容

热门资讯