微信小程序中暗黑模式的示例分析

发布时间:2021-03-15 15:15:29 作者:小新
来源:亿速云 阅读:385

小编给大家分享一下微信小程序中暗黑模式的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

1、开启暗黑模式

app.json 中配置 "darkmode": true

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

2、配置主题文件

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

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

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

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

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

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

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

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

// 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、效果图

微信小程序中暗黑模式的示例分析

看完了这篇文章,相信你对“微信小程序中暗黑模式的示例分析”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

推荐阅读:
  1. 微信小程序中关于安全的示例分析
  2. 微信小程序中WXSS的示例分析

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

小程序

上一篇:win10中此电脑如何在桌面显示

下一篇:使用gin解析json格式数据时出错如何解决

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》