html如何实现暗黑模式


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

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

准备

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

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

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

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

(推荐教程:html教程)

说明

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

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

prefers-color-scheme说明

DEMO地址

阅读剩余部分

相关阅读 >>

Html的含义是什么

Html 如何添加链接

关于Html和css绘制三角形图标的方法

Html怎么设置字体加粗

Html5 canvas标签是什么意思?canvas标签使用方法介绍

Html的注释格式是什么

Html怎么改变图片大小

Html怎么播放视频

Html var标签怎么用

Html有什么用

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




打赏

取消

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

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

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

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

评论

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