乐趣区

关于前端:给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、用户信息、粉丝关注、告诉私信、组织信息等。

你也能够扫码体验:

瞧瞧局部截图:



退出移动版