若您想为您的小程序添加 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"
    }
}


			


				上一篇：微信小程序 数据预拉取 

				下一篇：微信小程序 大屏适配指南 

				


					供应商入驻

					多用户分账方案

					商城源码

					查看更多

				

			

			


				


					
B2B2C多用户商城系统

					支持企业自营与商户入驻模式共存

					会员一站式精细化营销工具

					多用户分销，带来爆发式增长

					
系统支持平台自营+供应商店铺共存的经营模式(类天猫&京东模式)，帮助企业打造生态级商业平台为目的的电子商务系统。

					免费试用系统

				

				


					
B2B2B电商交易系统

					优化供应链协作

					授信及账期支付

					商品按照数量阶梯设价

					
全渠道订货/采购及经销商管理数字化系统,实现供应链整合和交易便捷化。

					免费试用系统

				

				


					
S2B2B电商交易系统

					供销一体化，提高市场集中度

					集团管控一体化，有效实现供需匹配

					移动应用一体化，提高运营综合效率

					
上下游资源整合数字化解决方案，赋能产业供应链，构建产业互联网生态体系。

					免费试用系统