分类： DarkMode 适配指南

DarkMode 适配指南

微信从 iOS 客户端 7.0.12、Android 客户端 7.0.13 开始正式支持 DarkMode，微信小程序也从基础库 v2.11.0、开发者工具 1.03.2004271 开始，为开发者提供微信小程序内的 DarkMode 适配能力。

开启 DarkMode

在app.json中配置darkmode为true，即表示当前微信小程序已适配 DarkMode，所有基础组件都会根据系统主题展示不同的默认样式，navigation bar 和 tab bar 也会根据下面的配置自动切换。

相关配置

当app.json中配置darkmode为true时，微信小程序的部分配置项可以通过变量的形式来配置。在变量配置文件中定义不同主题下的颜色或图标，方法如下：

  1. 在app.json中配置themeLocation，指定变量配置文件 theme.json 的路径，例如：在根目录下新增theme.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