# DarkMode Adaptation guide

WeChat from iOS client 7.0.12, Android Guest Account 7.0.13 Start formal support DarkMode, Mini Programs are also used from the base library V2.11.0, Developer Tools 1.03.2004271 To start, providing developers with the inside of the Mini Program DarkMode Adaptability.

# open DarkMode

inapp.jsonIn ConfigurationdarkmodefortrueThat is, the current Mini Program is adapted DarkMode, where all base components display different default styles depending on the system theme, navigation bar and tab bar Will also switch automatically according to the following configuration.

# Related configuration

whenapp.jsonIn ConfigurationdarkmodefortrueThe configuration items of the Mini Program can be configured in the form of variables, and the colors or icons under different themes are defined in the variable configuration file as follows:

1. inapp.jsonIn ConfigurationthemeLocation, Specify Variable Profile File[theme.json ](#Variable Configuration File - theme-json)Path, for example: add in the root directorytheme.json, Need to Configure"themeLocation":"theme.json"
2. intheme.jsonDefine the relevant variables in the
3. inapp.jsonZhongyi@Start by referencing variables.

Properties that are supported by variable configuration:

• Globally configured window Properties and Properties under Page Configuration
  • navigationBarBackgroundColor
  • navigationBarTextStyle
  • backgroundColor
  • backgroundTextStyle
  • backgroundColorTop
  • backgroundColorBottom
• Global configuration window.tabBar The properties of
  • color
  • selectedColor
  • backgroundColor
  • borderStyle
  • list
    • iconPath
    • selectedIconPath

# Variable configuration file theme.json

theme.jsonFor the variable definition of the color theme, it needs to be defined in thethemeLocationIn Configurationtheme.jsonThe variable configuration cannot be read otherwise.

The profile must contain the following attributes:

lightanddarkBelow can bekey: valueDefine variable names and values in a way that, for example:

{
  "light": {
    "navBgColor": "#f6f6f6",
    "navTxtStyle":  "black"
  },
  "dark": {
    "navBgColor": "#191919",
    "navTxtStyle":  "white"
  }
}

When you have completed the definition, in the relevant properties of the global configuration or page configuration, you can add@Opening quote, for example:

// Global configuration
{
  "window": {
    "navigationBarBackgroundColor": "@navBgColor",
    "navigationBarTextStyle": "@navTxtStyle" 
  }
}
// Page configuration
{
  "navigationBarBackgroundColor": "@navBgColor",
  "navigationBarTextStyle": "@navTxtStyle" 
}

After the configuration is completed, the Mini Program framework will automatically display the colors under the corresponding theme for the Mini Program according to the system theme.

# Example of configuration

Apagejson (example omits configuration items other than topic related)

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

theme.json

{
    "light": {
        "navBgColor": "#f6f6f6",
        "navTxtStyle":  "black",
        "bgColor": "#ffffff",
        "bgTxtStyle":  "light",
        "bgColorTop": "#EE ee ee",
        "bgColorBottom": "#efefef",
        "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",
        "bgColor": "#1f1f1f",
        "bgTxtStyle":  "dark",
        "bgColorTop": "#191919",
        "bgColorBottom": "#1f1f1f",
        "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",
    }
}

# Get Current System Topics

ifapp.jsonIt is stated in"darkmode": true，wx.getSystemInfoorwx.getSystemInfoSyncThe return result will containthemeProperty, with a value oflightordark。

ifapp.jsonNo statement"darkmode": true, you cannot get thethemeAttribute (i.e.themeforundefined）。

# Listen for Topic Switching Events

Support in 2 ways:

1. inApp()Incoming inonThemeChangeCallback method, which is triggered when the topic switches
2. adoptwx.onThemeChangeListening for theme changes,wx.offThemeChangeCancel the wire.

# WXSS adaptation

In WXSS, support queries via media prefers-color-scheme Adapt to different themes, and Web In a consistent manner, for example:

/* Style in general Begin */
.some-background {
    background: white
}
.some-text {
    color: black
}
/* Style in general end */

@media (prefers-color-scheme: dark) {
    /* DarkMode The style under start */
    .some-background {
        background: #1b1b1b
    }
    .some-text {
        color: #ffffff
    }
    /* DarkMode The style under end */
}

# Developer Tools Debugging

Weixin DevTools 1.03.2004271 Version is supported. DarkMode Debugging, at the top of the simulator you can switch Dark color/light color Pattern is carried out, as shown in the figure:

# Bug & Tip

1. tip: It should be noted that WXSS Media queries in theapp.jsonto hit the targetdarkmodeSwitch configuration effects as long as the WeChat client (iOS) 7.0.12、Android 7.0.13) Support DarkMode, whether or not configured"darkmode": true, after the system switches to the DarkMode Media inquiries will take effect.
2. tip: The topic switching event needs to be configured"darkmode": trueWhen it is triggered.
3. bug: iOS 7.0.12 in light Configuration in mode tabBar ofborderStyleforwhiteThere may be a black background. The bug will be fixed in subsequent versions.