如果app.json未声明"darkmode": true,则无法获取到theme属性(即theme为undefined)。
监听主题切换事件
支持2种方式:
- 在App()中传入onThemeChange回调方法,主题切换时会触发此回调
- 通过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
- tip: 需要注意的是,WXSS 中的媒体查询不受app.json中的darkmode开关配置影响,只要微信客户端(iOS 7.0.12、Android 7.0.13)支持 DarkMode,无论是否配置"darkmode": true,在系统切换到 DarkMode 时,媒体查询都将生效。
- tip: 主题切换事件需要在配置"darkmode": true时,才会触发。
- bug: iOS 7.0.12 在 light 模式中配置 tabBar 的borderStyle为white时可能会出现黑色背景的 bug,后续版本将会修复。
标签:微信小程序
相关阅读 >>
微信小程序apisettextbaseline(设置文字水平对齐)
更多相关阅读请进入《微信小程序》频道 >>

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者