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

相关内容

热门资讯

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日晚间华夏基金发布公告称,根据华夏基金股东会决议,并经证监会核准,华夏基金原股东天津海鹏科技...