赵彤刚
官方个人博客
赵彤刚的博客

浅谈网页暗模式的实现

浅谈网页暗模式的实现

我们浏览网页时,经常会发现许多网页都支持两种主题模式,一种是正常模式,一种是夜间模式,夜间模式也就是我们所说的暗色模式,也可以说是深色模式或者灰色模式。今天我们就来探讨如何让网页实现暗色模式。

其实想要实现网页暗色模式,我们只需要使用CSS中的“prefers-color-scheme”属性来完成设置即可。

prefers-color-scheme属性简介:

prefers-color-scheme是CSS媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。
no-preference表示系统未得知用户在这方面的选项。在布尔值上下文中,其执行结果为 false
light表示用户已告知系统他们选择使用浅色主题的界面。
dark表示用户已告知系统他们选择使用暗色主题的界面。

其实,我们只需要用prefers-color-scheme的dark属性值即可,具体源码如下:

普通模式演示

暗色模式演示

 

最后,我们只需要把PC端的浏览器设置为灰色主题(夜间模式)即可体现效果,至于手机端的浏览器也是同样的道理,手机端的QQ和微信也是可以实现的,只需要开启应用的夜间模式即可。

百度未收录
赞赏
本文标题:《浅谈网页暗模式的实现
链接地址:https://blog.heheda.top/901.html
版权声明:注明于文章开头的引语部分。若引语部分未作出声明,则默认版权归本站所有!

赵 彤刚

文章作者

抬头仰望星空,梦想不远不近!

看了又看

发表评论

textsms
account_circle
email

CAPTCHAis initialing...

赵彤刚的博客

浅谈网页暗模式的实现
我们浏览网页时,经常会发现许多网页都支持两种主题模式,一种是正常模式,一种是夜间模式,夜间模式也就是我们所说的暗色模式,也可以说是深色模式或者灰色模式。今天我们就来探讨如何让…
扫描二维码继续阅读
2021-09-02