web跟随系统暗黑模式

现代的系统windows/mocOS/IOS/Android/Linus等等几乎都支持了整个系统的暗黑色主题与亮色主题模式的选择切换, 现代web浏览器自然也都跟随着加入了这一功能. 那么如何将这些功能应用到我们的实际项目中呢?这里就涉及到新的css样式

当系统支持暗黑模式的时候就会应用到 @media (prefers-color-scheme: dark) 内部的样式

如果有独立分开的css样式文件,可使用js判断是否处于暗黑模式,然后再确定加载那个css样式即可, js获取media信息如下

通过监听matchMedia的change事件可判断用户是否切换了暗黑/亮色模式

效果如下

本文首先介绍了暗黑模式的css样式, 通过使用css的meida查询器设置系统的样式. 然后介绍了通过js查询系统的暗黑模式状态 , 最后介绍了使用js监听系统模式动态变化事件. 能用js控制自然会发挥js的能力,有了更多的可 *** 控性.

拿「手机微信版本8.0.28」来说，

可能是你手机微信没有更新，更新一下微信版本，就可以设置为深色模式啦。

1.打开手机微信，点击我。

2.进入设置，如图所示：

3.在设置中，进入通用，如图所示：

4.在通用中，选择深色模式，如图所示：

5.在深色模式中，勾选深色模式，点击完成。

这样，你手机微信的背景就调为深色模式啦。

1、苹果版的微信最近推出了暗黑模式可跟随系统的设置切换为深色模式 *** 作如下：

2、打开手机系统设置。

3、点击显示与亮度。

4、点击深色模式。

5、打开微信就会发现微信已经自动跟随系统设置进入深色模式了。

---