TDesign 小程序暗黑模式适配

TDesign miniprogram v1.3.0版本更新 “微信小程序组件库提供原生深色模式适配”,这无疑是一个好消息,不用自己单独适配,属实方便

更新至最新的 TDesign miniprogram版本库

  1. 微信开发者工具中 打开调试器;
  2. 调试器中打开 终端
  3. 输入
    1
    npm install tdesign-miniprogram@new_version
  4. 需要在微信开发者工具中对 npm 进行构建:工具 - 构建 npm

适配暗黑模式

修改 app.json

  1. 新增
    1
    2
    "darkmode": true,
    "themeLocation": "theme.json"
  2. 修改
    1
    2
    3
    4
    5
    6
    7
    8
    9
    //具体需要根据项目具体情况修改
    "window": {
    "navigationBarBackgroundColor": "@navBgColor",
    "navigationBarTextStyle": "@navTxtStyle",
    "backgroundColor": "@bgColor",
    "backgroundTextStyle": "@bgTxtStyle",
    "backgroundColorTop": "@bgColorTop",
    "backgroundColorBottom": "@bgColorBottom"
    }

根目录新增 theme.json 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//具体需要根据项目具体情况修改
{
"light": {
"navBgColor": "#ffffff",
"navTxtStyle": "black",
"bgColor": "#ffffff",
"bgTxtStyle": "light",
"bgColorTop": "#eeeeee",
"bgColorBottom": "#efefef"
},
"dark": {
"navBgColor": "#191919",
"navTxtStyle": "white",
"bgColor": "#1f1f1f",
"bgTxtStyle": "dark",
"bgColorTop": "#191919",
"bgColorBottom": "#1f1f1f"
}
}

修改app.wxss文件

1
2
//导入dark.wxss文件
@import '/miniprogram_npm/tdesign-miniprogram/common/style/theme/_dark.wxss';

大工告成

Enjoy :-)