乐趣区

关于前端:给Gitee小程序加上暗黑模式是什么体验

jiezi

前段时间利用空余工夫基于 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、用户信息、粉丝关注、告诉私信、组织信息等。

你也能够扫码体验：

瞧瞧局部截图：



退出移动版