DarkMode 适配指南

微信从iOS客户端 7.0.12、Android客户端 7.0.13 开始正式支持 DarkMode，小程序也从基础库 v2.11.0、开发者工具 1.03.2004271 开始，为开发者提供小程序内的 DarkMode 适配能力。

开启 DarkMode

在app.json中配置darkmode为true，即表示当前小程序已适配 DarkMode，所有基础组件均会根据系统主题展示不同的默认样式，navigation bar 和 tab bar 也会根据下面的配置自动切换。

相关配置

当app.json中配置darkmode为true时，小程序部分配置项可通过变量的形式配置，在变量配置文件中定义不同主题下的颜色或图标，方法如下：

1. 在app.json中配置themeLocation，指定变量配置文件theme.json路径，例如：在根目录下新增theme.json，需要配置"themeLocation":"theme.json"
2. 在theme.json中定义相关变量；
3. 在app.json中以@开头引用变量。

支持通过变量配置的属性：

• 全局配置的 window 属性与页面配置下的属性navigationBarBackgroundColornavigationBarTextStylebackgroundColorbackgroundTextStylebackgroundColorTopbackgroundColorBottom
• 全局配置 window.tabBar 的属性colorselectedColorbackgroundColorborderStylelisticonPathselectedIconPath

变量配置文件 theme.json

theme.json用于颜色主题相关的变量定义，需要先在themeLocation中配置theme.json的路径，否则无法读取变量配置。

配置文件须包含以下属性：

light和dark下均可以key: value的方式定义变量名和值，例如：

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

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

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

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