CSS媒体查询@media (prefers-color-scheme:dark)判断系统白天黑夜模式
创始人
2024-06-01 23:33:48
0次

前言

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

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

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

下一篇：知识图谱之py2neo

相关内容

热门资讯

陶渊明的冲淡 转自：新安晚报 　　夜读池州市包光潜先生的佳作《陶渊明的红颜知己》，在为五柳先生感慨嗟叹的同时，不禁...
寻访城市记忆 赓续庐州文脉 7月7日，合肥市建平实验小学南艳分校四(2)班青禾中队的队员们在辅导员老师葛伟伟的带领下，怀揣着对家...
最高贷9万元！多地农商行推出“... “‘养老贷’是我行新业务，目前仍然可以办理，带上相关证件到网点即可。”7月10日下午，湖南某农商行网...
清代《昆明县志》品题昆明百花 清道光年间，昆明进士戴絅孙所纂《昆明县志》成稿，这是云南第一部私人编纂的地方志。书中记载了昆明花卉1...
苏豪弘业聘任54岁罗凌为非独立... 7月11日，苏豪弘业公告，聘任罗凌女士为公司非独立董事。资料显示，罗凌女士：1971年5月生，本科，...
帝欧家居聘任40岁陈宇超为副总... 7月11日，帝欧家居公告，聘任陈宇超先生为公司副总裁。资料显示，陈宇超：男，1985年11月出生，中...
日方多次炒作中国战机接近日军机 转自：京报网_北京日报官方网站 【#日方多次炒作中国战机...
租电 19.39 万元起，乐道... 　　炒股就看金麒麟分析师研报，权威，专业，及时，全面，助您挖掘潜力主题机会！ 在发布会前两天的一场...
五方光电高管赵刚拟减持5661... 7月10日，五方光电公告，非独立董事赵刚计划在2025年8月1日至2025年10月31日期间，通过竞...
连续两日施压，特朗普再催美联储... 经济观察网 据央视新闻消息，当地时间7月10日，美国总统特朗普在社交媒体平台“真实社交”上发文，再度...