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两种模式,其他的仍为手动设置。

相关内容

热门资讯

项少龙的女朋友 项少龙的女朋友展开全部 你好!古天乐饰演的项少龙,他最后没有回到现代,不过影片开头的时候他做梦回...
量子物理学入门书籍 量子物理学入门书籍 你可以先看一下《时间简史(普及版)》它不仅由浅入深而且几乎所有的专业词汇都有...
浪漫的名人格言 浪漫的名人格言名人说的执着之爱,不渝之情,缠绵之思,凄切之苦,永恒之盼。 被爱是一种恩惠,必须全心全...
西班牙历史上最著名的斗牛士是哪... 西班牙历史上最著名的斗牛士是哪位 西班牙最有名的斗牛士是马诺莱特,他取得的巨大成功和他在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航班情况的说明...