微信小程序 暗黑模式 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

微信小程序 暗黑模式

发表时间:2021-1-11

发布人:葵宇科技

浏览次数:55

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

相关案例查看更多