WeChat Mini Program Dark Mode

1. Turn on dark mode

Configure"darkmode": true

// app.json { ... "darkmode": true }

in

app.json

2. Configure theme file

Create a new theme configuration filetheme.jsonin the root directory, and configure the path inapp.jsonto import

// app.json { ... "themeLocation": "theme.json" }

theme.jsonThe configuration file is divided into two attributes,lightanddark, which are normal mode and dark mode respectively.

theme.jsonThe example is as follows (for reference only):

// theme.json { "light": { "navBackgroundColor": "#ffffff", "navTextStyle": "black" }, "dark": { "navBackgroundColor": "#000000", "navTextStyle": "white" } }

must existlightanddarktwo attributes , the inner layer naming is customized and there are no strict requirements.

3. Apply configuration attributes inapp.json

Splice the configuration attributes starting with@theme.jsonWrite the custom name in the configuration, the example is as follows

// app.json { ... "window": { "navigationBarBackgroundColor": "@navBackgroundColor", "navigationBarTitleText": "小书包大梦想", "navigationBarTextStyle": "@navTextStyle" }, "darkmode": true, "themeLocation": "theme.json" }

After the configuration is completed, and then the phone turns on the dark mode (dark mode), the applet will convert according to the color you configured.

4. wxss style adaptation to dark mode

wxsssupports media queryprefers-color-schemeto adapt to different themes.

The following style will make the page background gray-white in normal mode and black in dark mode.

/* 正常模式下应用的样式 */ page{ background: #f1f1f1; } /* 暗黑模式下应用的样式 */ @media (prefers-color-scheme: dark) { page{ background: #000000; } }

5. Rendering

Recommended tutorial: "WeChat Mini Program"

The above is the detailed content of WeChat Mini Program Dark Mode. For more information, please follow other related articles on the PHP Chinese website!