用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

微信小程序 暗黑模式

Rolan 2020-6-25 00:28

来自 CSDN 作者 小书包大梦想 原文链接1、开启暗黑模式在 app.json 中配置 "darkmode": true// app.json{ ... "darkmode": true}2、配置主题文件在根目录新建主题配置文件 theme.json, 并在 app.json 中配置路径引入 ...

来自 CSDN 作者 小书包大梦想 原文链接

1、开启暗黑模式

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

  1. // app.json
  2. {
  3. ...
  4. "darkmode": true
  5. }

2、配置主题文件

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

  1. // app.json
  2. {
  3. ...
  4. "themeLocation": "theme.json"
  5. }

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

theme.json 示例如下(仅供参考):

  1. // theme.json
  2. {
  3. "light": {
  4. "navBackgroundColor": "#ffffff",
  5. "navTextStyle": "black"
  6. },
  7. "dark": {
  8. "navBackgroundColor": "#000000",
  9. "navTextStyle": "white"
  10. }
  11. }

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

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

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

  1. // app.json
  2. {
  3. ...
  4. "window": {
  5. "navigationBarBackgroundColor": "@navBackgroundColor",
  6. "navigationBarTitleText": "小书包大梦想",
  7. "navigationBarTextStyle": "@navTextStyle"
  8. },
  9. "darkmode": true,
  10. "themeLocation": "theme.json"
  11. }

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

4、wxss样式适配暗黑模式

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

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

  1. /* 正常模式下应用的样式 */
  2. page{
  3. background: #f1f1f1;
  4. }
  5. /* 暗黑模式下应用的样式 */
  6. @media (prefers-color-scheme: dark) {
  7. page{
  8. background: #000000;
  9. }
  10. }

5、效果图

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: littleBit 来自: 简书