微信 iOS 客户端 7.0.12 版本、Android 客户端 7.0.13 版本正式支持 DarkMode,开发者可以根据自身需求,为小程序适配 DarkMode。当在 app.json 中指明 "darkmode": true 时,部分配置项可支持通过变量方式配置(详见DarkMode 适配指南)。
# theme 配置
theme.json 用于颜色主题相关的变量定义,需要先在 themeLocation 中配置 theme.json 的路径,否则无法读取变量配置。
配置文件须包含以下属性:
| 属性 | 类型 | 必填 | 描述 |
|---|---|---|---|
| light | object | 是 | 浅色模式下的变量定义 |
| dark | object | 是 | 深色模式下的变量定义 |
light 和 dark 下均可以 key: value 的方式定义变量名和值,例如:
{
"light": {
"navBgColor": "#f6f6f6",
"navTxtStyle": "black"
},
"dark": {
"navBgColor": "#191919",
"navTxtStyle": "white"
}
}
完成定义后,可在全局配置或页面配置的相关属性中以 @ 开头引用,例如:
// 全局配置
{
"window": {
"navigationBarBackgroundColor": "@navBgColor",
"navigationBarTextStyle": "@navTxtStyle"
}
}
// 页面配置
{
"navigationBarBackgroundColor": "@navBgColor",
"navigationBarTextStyle": "@navTxtStyle"
}
配置完成后,小程序框架会自动根据系统主题,为小程序展示对应主题下的颜色。