用weui的css站点,屏蔽深色模式的方法

https://weui.io提供了微信规范的ui样式,移动端网页通过使用weui的css可以快速实现微信ui规范的界面。随着微信支持深色模式,weui在2.2.0版开始支持跟随微信自动开启深色模式,如果你的站点在weui基础上做了自定义样式并且没有为深色模式做适配,那在深色模式下可能会很糟糕。

深色模式未适配的糟糕界面

也许你计划要更新一个支持深色模式的自定义样式,但当务之急应该是尽快屏蔽深色模式,让使用深色模式的用户界面恢复正常。

v2.2.0开始支持深色模式

https://github.com/Tencent/weui了解到深色模式是通过在body添加属性data-weui-theme来控制,css中将匹配body是否带有data-weui-theme=dark来判断是否用深色模式的css内容覆盖原来的内容。

body属性data-weui-theme='dark'

所以如果将body的属性data-weui-theme属性修改成light就好了。以jQuery为例,在页面的底部</body>之前加入以下代码,即可屏蔽深色模式,将页面强制转为普通模式:

$(document).ready(function(){$('body').attr('data-weui-theme', 'light');});
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。