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

相关内容

热门资讯

珠江啤酒涨0.58%，成交额2... 5月6日，珠江啤酒涨0.58%，成交额2.16亿元，换手率0.94%，总市值231.07亿元。异动分...
益盛药业跌0.12%，成交额8... 5月6日，益盛药业跌0.12%，成交额8348.36万元，换手率4.33%，总市值27.54亿元。异...
永辉超市跌1.04%，成交额4... 5月6日，永辉超市跌1.04%，成交额4.99亿元，换手率1.45%，总市值344.85亿元。异动分...
重药控股涨1.21%，成交额1... 5月6日，重药控股涨1.21%，成交额1.70亿元，换手率1.68%，总市值101.44亿元。异动分...
科德教育涨1.68%，成交额2... 5月6日，科德教育涨1.68%，成交额2.17亿元，换手率3.32%，总市值65.89亿元。异动分析...