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

相关内容

热门资讯

A股最新！603719，控制权... 良品铺子（603719）7月10日晚间公告，公司近日收到控股股宁波汉意创业投资合伙企业（有限合伙）（...
长龄液压：核芯破浪拟以36.2... 长龄液压晚间公告，2025年7月10日，核芯听涛与夏继发、夏泽民，澄联双盈与夏继发分别签署的《股份转...
浙江推动国际工程供应链协同 赋... 来源：中国新闻网 中新网杭州7月10日电(蓝伊旎)7月10日，“浙链全球-携手出海”活动启航暨国际供...
业绩预喜汇总丨这家公司上半年净... 天保基建：上半年净利同比预增1581.8%—2329.27%华茂股份：上半年净利同比预增293.36...
“知了壳”收购商：是中药材，行... 来源：九派新闻 伴随着金蝉上市，蝉蜕也迎来收购期。蝉蜕，俗称知了壳，是金蝉蜕去的皮，也是一味中药材，...
国办发文要求加大稳就业政策支持... 每经记者｜张宏    每经编辑｜陈星     7月9日，国务院办公厅印发的《关于进...
产量越大亏损越重 乐凯胶片停产... 每经记者｜杨卉    每经编辑｜陈俊杰     此前靠光伏业务打赢“翻身仗”，甚至...
女子拒绝“干3人活儿”被开除，... 转自：扬子晚报因为两名同事接连离职，高女士陆续被要求接手两名同事的工作。因为拒绝接手第二名离职同事的...
大学生创业计大学生创业策划书范... 就业前景：民以食为天，快速的时代步伐加快了生活的节奏，但是吃仍是离不开的。忙碌的生活，但餐桌上也是越...
华夏基金：10%股权变更已完成... 7月10日晚间华夏基金发布公告称，根据华夏基金股东会决议，并经证监会核准，华夏基金原股东天津海鹏科技...