前段时间利用空余时间基于 Gitee OpenApi 写了一个微信上的码云第三方非官方微信小程序，收获了一部分用户，一直想给它怼上跟随系统自动变化的暗黑模式，今天总算有时间给搞了。 实现原理 所…

实现原理

所有代码基本没碰到JavaScript部分，也没有使用小程序的API进行操作，全程使用媒体查询与环境变量实现，如下：

原始小程序部分

在小程序源代码根目录新建

1
theme.json

文件，用于保存暗黑模式和普通模式下的一些颜色值和配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  {
  "light": {
    "backgroundColor": "#f5f5f5",
    "backgroundTextStyle": "dark",
    "backgroundColorTop": "#f5f5f5",
    "backgroundColorBottom": "#f5f5f5",
    "navigationBarBackgroundColor": "#f5f5f5",
    "navigationBarTextStyle": "black"
  },
  "dark": {
    "backgroundColor": "#222",
    "backgroundTextStyle": "light",
    "backgroundColorTop": "#222",
    "backgroundColorBottom": "#222",
    "navigationBarBackgroundColor": "#222",
    "navigationBarTextStyle": "white"
  }
}

同时将这个配置文件引入到

1
app.json

中，同时将
1
window

节点中的颜色配置成上面的变量：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  {
  "darkmode": true,
  "themeLocation": "theme.json",
  "pages": [
  ...
  ],
  "window": {
    "backgroundColor": "@backgroundColor",
    "backgroundTextStyle": "@backgroundTextStyle",
    "backgroundColorTop": "@backgroundColorTop",
    "backgroundColorBottom": "@backgroundColorBottom",
    "navigationBarBackgroundColor": "@navigationBarBackgroundColor",
    "navigationBarTitleText": "码云仓库",
    "navigationBarTextStyle": "@navigationBarTextStyle",
    "navigationStyle": "default"
  },
}

这样，系统在切换显示模式时，小程序的导航栏部分就会自动跟着变色了 ：）

用户自定义页面部分

这部分无法直接引用这个配置文件的设置，而且可能很多地方有自定义的颜色值，所以这里需要自己写媒体查询了 ：(
这里编辑

1
app.wxss

或者每个页面单独的
1
*.wxss

，当然，我为了省事，基本都写在了
1
app.wxss

中：

1
2
3
4
5
6
7
  
@media (prefers-color-scheme: dark) {
	.title{
		color:white; /*将原本黑色的标题在暗黑模式下设置为白色 这里就需要各位自行调整颜色了*/
	}
}

收工体验

欢迎微信搜索

1
码云仓库

来体验一下，小程序支持了查看仓库、Pull Requests、Issues、用户信息、粉丝关注、通知私信、组织信息等。
你也可以扫码体验：
Test

瞧瞧部分截图：

Test Test Test

本文标题： 给Gitee小程序加上暗黑模式是什么体验

本文作者： OSChina

发布时间： 2021年04月15日 09:46

最后更新： 2025年04月03日 11:07

原始链接： https://haoxiang.eu.org/b8ca02a2/

版权声明： 本文著作权归作者所有，均采用CC BY-NC-SA 4.0许可协议，转载请注明出处！

赏
× 喜欢就赞赏一下呗！
打赏二维码