给Gitee小程序加上暗黑模式是什么体验

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

实现原理

全部代码均在Gitee/Github开源，欢迎Star~ Gitee | Github

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

原始小程序部分

在小程序源代码根目录新建 theme.json 文件，用于保存暗黑模式和普通模式下的一些颜色值和配置：

{
  "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"
  }
}

同时将这个配置文件引入到 app.json 中：

{
  "darkmode": true,
  "themeLocation": "theme.json",
  "pages": [
  ...
  ],
  "window":[
  ...
  ]
}

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

用户自定义页面部分

这部分没法直接引用这个配置文件的设置，并且可能不少地方有自定义的颜色值，因此这里须要本身写媒体查询了 ：(

这里编辑 app.wxss 或者每一个页面单独的 *.wxss ，固然，我为了省事，基本都写在了 app.wxss 中：

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

收工体验

欢迎微信搜索 码云仓库 来体验一下，小程序支持了查看仓库、Pull Requests、Issues、用户信息、粉丝关注、通知私信、组织信息等。

你也能够扫码体验：

瞧瞧部分截图：