美文网首页
用weui的css站点,屏蔽深色模式的方法

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

作者: chaopi | 来源:发表于2020-06-07 19:58 被阅读0次

    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');});
    

    相关文章

      网友评论

          本文标题:用weui的css站点,屏蔽深色模式的方法

          本文链接:https://www.haomeiwen.com/subject/nkchtktx.html