微信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 深色模式下的变量定义

lightdark下均可以key: value的方式定义变量名和值,例如:

{
  "light": {
    "navBgColor": "#f6f6f6",
    "navTxtStyle": "black"
  },
  "dark": {
    "navBgColor": "#191919",
    "navTxtStyle": "white"
  }
}

完成定义后,可在全局配置或页面配置的相关属性中以@开头引用,例如:

// 全局配置
{
  "window": {
    "navigationBarBackgroundColor": "@navBgColor",
    "navigationBarTextStyle": "@navTxtStyle"
  }
}
// 页面配置
{
  "navigationBarBackgroundColor": "@navBgColor",
  "navigationBarTextStyle": "@navTxtStyle"
}

配置完成后,小程序框架会自动根据系统主题,为小程序展示对应主题下的颜色。