Dark mode support with Taro.js

[victorteokw]

这个特性解决了什么问题？

I haven't found any documentation around support dark mode in WeChat applets.

这个 API 长什么样？

Where can I put the WeChat applet theme.json file, and how can I call "Taro.setBackgroundColor" according to different view themes.

[ivan-94]

目前好像只有微信小程序支持 Dark mode, 它支持在 *.json 配置中引用theme.json 中的变量：

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

这种实现有些侵入性。对于不支持 dark mode 的平台需要 Taro 来替换回退(比如light)？

[victorteokw]

目前好像只有微信小程序支持 Dark mode, 它支持在 *.json 配置中引用theme.json 中的变量：

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

这种实现有些侵入性。对于不支持 dark mode 的平台需要 Taro 来替换回退(比如light)？

Hi @ivan-94, thanks for your note for incompatibility with other applet/mini program platforms.
For WeChat applets with dark mode support, an independent theme.json file is required. It need to be copied to the destination dist directory.

I have a humble idea, how about user implementing these three files to support WeChat applet dark mode and other mini programs,

app.config.ts       # generic app config
app.config.weapp.ts # WeChat config only
theme.config.ts     # WeChat theme only

[ivan-94]

现有的：

Taro next 可以在 *.config.js 文件里面使用 process.env.TARO_ENV 区分平台。

Taro 2.x config 是内嵌在 *.jsx 的，可以用 preval 来区分特定平台。

再配合上 copy 就可以实现 DarkMode。

但是感觉就是不怎么优雅

[victorteokw]

@ivan-94，還有一個問題，似乎theme.config.ts不會被copy到dist目錄，每次都要手動複製移動。

[rottenpen]

@zhangkaiyulw 不清楚你引入依赖的代码是怎样的，不过如果你只是做静态输出不打包可以参考taro copy

[rottenpen]

@zhangkaiyulw 哦 我前面理解错了。这种情况你直接copy输出就好了

// config/index.js
module.exports = {
  // ...
  copy: {
      patterns: [
        { from: 'src/theme.config.js, to: 'dist/theme.config.js' }, // 指定需要 copy 的目录
      ]
    },
//....
}

[victorteokw]

@rottenpen 謝謝，那這個theme.json文件的問題解決了。

[rottenpen]

刚提了个 PR 如果合了后面的版本就不需要用 copy 了

[victorteokw]

谢谢，@rottenpen！👍
因为我目前只开发微信小程序，所以问题解决了。可是，
不过@ivan-94有提到，这样的小程序配置文件，很多字段写成了@navBarColor这个样子，对于不支持dark mode的小程序平台，怎么办呀？

[rottenpen]

我个人觉得微信提供这个 dark mode 配置更像一个语法糖，只能比较机械化地配置 color。如果想要更细致化地做 dark mode，还是要监听 APP 的 onThemeChange。
对于其他不支持 dark mode 的平台，我们也没办法监听系统是否是 dark mode 那就不用考虑啦。

[chj-damon]

@rottenpen 这个说法不对，比如我们在小程序里面提供一个功能说可以切换主题，这个时候实际上是无法修改到整体小程序的navigationBar和tabBar的样式的。因为微信的onThemeChange只是监听手机系统的主题是否发生了变化。

那么有其他办法可以实现这个需求吗？

[chj-damon]

@Chen-jj 另外，在最新的3.6.13版本里面仍然发现，根目录下新建的theme.json在不管是dev:weapp还是build:weapp的时候并不会被copy到dist目录下。