Home > WeChat Applet > Mini Program Development > WeChat Mini Program Dark Mode

WeChat Mini Program Dark Mode

hzc
Release: 2020-07-04 09:27:47
forward
4543 people have browsed it

1. Turn on dark mode

Configure "darkmode": true<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">// app.json {     ...     &quot;darkmode&quot;: true }</pre><div class="contentsignin">Copy after login</div></div> in

app.json

2. Configure theme file

Create a new theme configuration file theme.json in the root directory, and configure the path in app.json to import

// app.json
{
    ...
    "themeLocation": "theme.json"
}
Copy after login

theme.json The configuration file is divided into two attributes, light and dark, which are normal mode and dark mode respectively.

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

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

must exist light and dark two attributes , the inner layer naming is customized and there are no strict requirements.

3. Apply configuration attributes in app.json

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

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

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

wxss supports media query prefers-color-scheme to 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;
  }
}
Copy after login

5. Rendering

WeChat Mini Program Dark Mode

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!

Related labels:
source:jianshu.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template