微信小程序 DarkMode适配指南


当前第2页 返回上一页

如果app.json未声明"darkmode": true,则无法获取到theme属性(即theme为undefined)。

监听主题切换事件

支持2种方式:

  1. 在App()中传入onThemeChange回调方法,主题切换时会触发此回调
  2. 通过wx.onThemeChange监听主题变化,wx.offThemeChange取消监听

WXSS 适配

WXSS中,支持通过媒体查询 prefers-color-scheme 适配不同主题,与 Web 中适配方式一致,例如:


/* 一般情况下的样式 begin */
.some-background {
    background: white;
}
.some-text {
    color: black;
}
/* 一般情况下的样式 end */

@media (prefers-color-scheme: dark) {
    /* DarkMode 下的样式 start */
    .some-background {
        background: #1b1b1b;
    }
    .some-text {
        color: #ffffff;
    }
    /* DarkMode 下的样式 end */
}

开发者工具调试

微信开发者工具 1.03.2004271 版本开始已支持 DarkMode 调试,在模拟器顶部可以切换 深色/浅色 模式进行,如图:

Bug & Tip

  1. tip: 需要注意的是,WXSS 中的媒体查询不受app.json中的darkmode开关配置影响,只要微信客户端(iOS 7.0.12、Android 7.0.13)支持 DarkMode,无论是否配置"darkmode": true,在系统切换到 DarkMode 时,媒体查询都将生效。
  2. tip: 主题切换事件需要在配置"darkmode": true时,才会触发。
  3. bug: iOS 7.0.12 在 light 模式中配置 tabBar 的borderStyle为white时可能会出现黑色背景的 bug,后续版本将会修复。



标签:微信小程序

返回前面的内容

相关阅读 >>

微信小程序设计规范(4) 统一稳定

微信小程序apisettextbaseline(设置文字水平对齐)

sdk数据库 command聚合操作符日期操作符

sdk数据库 transaction

微信小程序导航 navigator

微信小程序 模板(template)

微信小程序api 登录

sdk数据库 aggregate联表查询

微信小程序 自定义组件

微信小程序 网络

更多相关阅读请进入《微信小程序》频道 >>




打赏

取消

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

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

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

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

评论

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

    正在狠努力加载,请稍候...