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

相关内容

热门资讯

项少龙的女朋友 项少龙的女朋友展开全部 你好！古天乐饰演的项少龙，他最后没有回到现代，不过影片开头的时候他做梦回...
量子物理学入门书籍 量子物理学入门书籍 你可以先看一下《时间简史（普及版）》它不仅由浅入深而且几乎所有的专业词汇都有...
浪漫的名人格言 浪漫的名人格言名人说的执着之爱，不渝之情，缠绵之思，凄切之苦，永恒之盼。 被爱是一种恩惠，必须全心全...
西班牙历史上最著名的斗牛士是哪... 西班牙历史上最著名的斗牛士是哪位 西班牙最有名的斗牛士是马诺莱特，他取得的巨大成功和他在1947年的...
美国洛杉矶一隧道坍塌 15人被... 来源：央视新闻客户端 美国加利福尼亚州洛杉矶市消防局9日说，该市威尔明顿地区当日发生一起隧道坍塌事故...
三星推全球最轻大折叠，电池容量... 　　炒股就看金麒麟分析师研报，权威，专业，及时，全面，助您挖掘潜力主题机会！ 当地时间7月9日，三...
高德红外涨2.38%，成交额4... 7月10日，高德红外盘中上涨2.38%，截至13:00，报10.33元/股，成交4.01亿元，换手率...
中国古代寓言故事记录其中的三本... 中国古代寓言故事记录其中的三本书是哪三本？作品目录爱钱如命爱驴暗室百发百中扁鹊说病鹬蚌相争杯弓蛇影卞...
中国目的地·入境游简报008｜... 本期简报为2025年6月1日至30日中国入境游相关内容：作为正式步入暑期的第一级台阶，6月的入境游市...
航班开始滑行又返回下客，吉祥航... 　　每经编辑|杜宇 　　7月10日，吉祥航空官方微博发布关于7月9日HO1860航班情况的说明...