html如何实现暗黑模式


本文摘自PHP中文网,作者V,侵删。

下面会为大家简单的说一下如何让页面支持暗黑模式。

准备

其实,我们只是需要使用到css中的 prefers-color-scheme 媒体查询。

no-preference 表示用户未制定操作系统主题。作为布尔值时,为 false 输出。

light 表示用户的操作系统是浅色主题。

dark 表示用户的操作系统是深色主题。

(推荐教程:html教程)

说明

这篇文章发布的时候,微信还无法拿到 prefers-color-scheme 参数,所以当我们在微信中打开页面目前不支持暗黑模式。

此方法只是一个简单demo,可以使用该方法拓展出其他实现方式。

prefers-color-scheme说明

DEMO地址

阅读剩余部分

相关阅读 >>

Html中滚动条的代码是什么?如何设置Html滚动条?

Html5应用:离线的应用以及存储的应用

Html怎么改字体颜色

Html引入外部javascript是什么属性

Html track标签怎么用

Html object 元素使用教程

Html如何控制元素显示和隐藏

Html怎么换行?换行代码是什么?九种Html文字换行方法总结

Html中class什么意思?Html的class属性用法介绍(附实例)

Html中<p>和<br>的区别是什么

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...