html如何实现暗黑模式


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

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

准备

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

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

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

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

(推荐教程:html教程)

说明

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

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

prefers-color-scheme说明

DEMO地址

阅读剩余部分

相关阅读 >>

Html最外层元素是什么?

Html bdi标签怎么用

Html怎么让文字居中

Html如何实现tab页面切换

Html设置怎么文字的位置

Html如何实现鼠标悬停提示a标签内容

Html frameset标签怎么用

Html的meta标签有什么用?Html中meta标签属性的相关用法

Html的meta标签用法总结

Html怎么隐藏p标签

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




打赏

取消

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

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

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

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

评论

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