微信小程序暗黑模式-小程序开发-PHP中文网

微信小程序暗黑模式

hzc

发布： 2020-07-04 09:27:47

转载

5532人浏览过

1、开启暗黑模式

在 app.json 中配置 "darkmode": true

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

登录后复制

2、配置主题文件

在根目录新建主题配置文件 theme.json, 并在 app.json 中配置路径引入

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

登录后复制

theme.json 配置文件一共分为两个属性，light 和 dark，分别正常模式和暗黑模式。

theme.json 示例如下（仅供参考）：

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

登录后复制

必须存在 light 和 dark 两个属性，里层命名自定义，没有严格要求。

3、在 `app.json` 中应用配置属性

在配置属性以 @ 开头拼接 theme.json 中自定义的名字写入配置，示例如下

45°C商城系统

系统介绍 45°C 商城系统，以 Thinkphp5.0 + Uniapp + Layui2.9 + Vue 为技术基石，精心打造出的全新 MINI 商城应用。其功能覆盖全面，无论是 PC 商城、H5 商城，还是公众号商城、微信小程序以及抖音小程序的制作都能完美胜任。采用标准系统结合插件模式开发，用户能够极为便捷地定制专属的个性模块。整个系统，从程序设计到 UI 呈现，都秉持着一贯的小而美理念。程

查看详情

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

登录后复制

配置完些，接着手机开启暗黑模式（深色模式）后，小程序会根据你配置的颜色进行转换。

4、wxss样式适配暗黑模式

wxss 中，支持通过媒体查询 prefers-color-scheme 适配不同主题。

如下样式会在正常模式下页面背景为灰白色，暗黑模式下为黑色。

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

登录后复制

5、效果图

推荐教程：《微信小程序》

以上就是微信小程序暗黑模式的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

小程序交易组件,你想知道的10个问题! 小程序首次审核与迭代审核有哪些不同? 单商户小程序:你的线上旺铺,24小时不打烊如何参考竞品小程序,提炼自己的功能需求? 这些小程序功能,花钱少,效果大!

微信小程序 暗黑模式

1、开启暗黑模式

2、配置主题文件

3、在 app.json 中应用配置属性

4、wxss样式适配暗黑模式

5、效果图

大家都在看：

微信小程序暗黑模式

3、在 `app.json` 中应用配置属性