1

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

 1 year ago
source link: https://my.oschina.net/majhamm/blog/5007103
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
给Gitee小程序加上暗黑模式是什么体验 - Hamm - OSCHINA - 中文开源技术交流社区

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

你也可以扫码体验:

瞧瞧部分截图:


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK