微信小程序 DarkMode适配指南

若您想为您的小程序添加 DarkMode 适配功能，可以参考以下指南：

1. 开启 DarkMode

在 app.json 中将 darkmode 设置为 true，表示小程序已经适配了 DarkMode。此时小程序中的组件，包括导航栏和选项卡都会自动切换到与系统主题相匹配的默认样式。

2. 相关配置

当设置了 app.json 中的 darkmode 属性为 true 后，我们可以通过定义变量来设置特定颜色或图标。具体方法如下：

1. 在 app.json 中配置 themeLocation，指定变量配置文件 theme.json 的路径。
2. 在 theme.json 中定义相关变量。
3. 在 app.json 或页面配置中可以通过 @ 号引用变量。

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

• 全局配置的 window 属性与页面配置下的属性 navigationBarBackgroundColor、navigationBarTextStyle、backgroundColor、backgroundTextStyle、backgroundColorTop、backgroundColorBottom。
• 全局配置 Window.tabBar 属性中的 color 、 selectedColor、backgroundColor、borderStyle、list、iconPath、selectedIconPath。

变量配置文件示例：theme.json

请根据需求在此配置颜色主题相关的变量:

在定义好变量后，可以在全局配置或页面配置的相关属性中以 @ 开头引用这些变量。

配置示例：

1. 在 app.json 中设置如下：

"window": {
  "navigationBarBackgroundColor": "@navBgColor",
  "navigationBarTextStyle": "@navTxtStyle"
},
"tabBar": {
  "color": "@tabFontColor",
  "selectedColor": "@tabSelectedColor",
  "backgroundColor": "@tabBgColor",
  "borderStyle": "@tabBorderStyle",
  "list": [{
    "iconPath": "@iconPath1",
    "selectedIconPath": "@selectedIconPath1"
    }, 
    {
    "iconPath": "@iconPath2",
    "selectedIconPath": "@selectedIconPath2"
  }]
}

2. 定义变量

{
    "light": {
        "navBgColor": "#f6f6f6",
        "navTxtStyle": "black",
        "tabFontColor": "#000000",
        "tabSelectedColor": "#3cc51f",
        "tabBgColor": "#ffffff",
        "tabBorderStyle": "black",
        "iconPath1": "image/icon1_light.png",
        "selectedIconPath1": "image/selected_icon1_light.png",
        "iconPath2": "image/icon2_light.png",
        "selectedIconPath2": "image/selected_icon2_light.png"
    },
    "dark": {
        "navBgColor": "#191919",
        "navTxtStyle": "white",
        "tabFontColor": "#ffffff",
        "tabSelectedColor": "#51a937",
        "tabBgColor": "#191919",
        "tabBorderStyle": "white",
        "iconPath1": "image/icon1_dark.png",
        "selectedIconPath1": "image/selected_icon1_dark.png",
        "iconPath2": "image/icon2_dark.png",
        "selectedIconPath2": "image/selected_icon2_dark.png"
    }
}

		

<以上资讯仅供参考，如果您需解决具体问题，建议您关注作者；如果有软件产品开发需求，可在线咨询加速度产品经理获取方案和报价>

****更多行业产品开发方案，请关注jsudo加速度 https://www.jsudo.com***

【加速度jsudo（www.jsudo.com）】是国内知名企业数字化建设提供商，为企业提供电商平台搭建（多种模式电商平台搭建：B2B/B2B2C/B2C/O2O/新零售等）、智慧园区建设、数字化营销、人才外包等服务，点击这里查看了解更多行业解决方案。