微信小程序深色模式（DarkMode）适配

如何开启深色模式（DarkMode）

在 app.json 中 darkmode 设置为 true，即表示此小程序已适配了深色模式。

如何定义深色模式

1. 在app.json中配置themeLocation，指定变量配置文件theme.json路径，例如：在根目录下新增theme.json，需要置"themeLocation":"theme.json"；

2. 在theme.json中定义相关变量；

3. 在app.json中以@开头引用变量。

举例：theme.json

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

app.json 及 页面配置中引用相关变量

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

获取当前是否是深色模式

如果app.json中声明了"darkmode": true，wx.getSystemInfo或wx.getSystemInfoSync的返回结果中会包含theme属性，值为light或dark。

如果app.json未声明"darkmode": true，则无法获取到theme属性（即theme为undefined）

监听主题切换事件

支持2种方式：

1. 在App()中传入onThemeChange回调方法，主题切换时会触发此回调

2. 通过wx.onThemeChange监听主题变化，wx.offThemeChange取消监听

适配CSS

/* 一般情况下的样式 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 */
}