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

人工智能
• 阅读 1345
前段时间利用空余时间基于 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 中,同时将 window 节点中的颜色配置成上面的变量:

{
  "darkmode": true,
  "themeLocation": "theme.json",
  "pages": [
  ...
  ],
  "window": {
    "backgroundColor": "@backgroundColor",
    "backgroundTextStyle": "@backgroundTextStyle",
    "backgroundColorTop": "@backgroundColorTop",
    "backgroundColorBottom": "@backgroundColorBottom",
    "navigationBarBackgroundColor": "@navigationBarBackgroundColor",
    "navigationBarTitleText": "码云仓库",
    "navigationBarTextStyle": "@navigationBarTextStyle",
    "navigationStyle": "default"
  },
}

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

用户自定义页面部分

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

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


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

收工体验

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

你也可以扫码体验:

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

瞧瞧部分截图:

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

点赞
收藏
评论区
推荐文章
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
小森森 小森森
2年前
计划助手V1.0-微信小程序(QQ小程序)-源代码分享
疫情期间在家感觉好无聊啊,于是利用空闲时间做了一个用来记录和管理小目标时间的小程序,命名为《小沙漏》。QQ版本小程序同步上线,QQ小程序叫《时间小沙漏》,欢迎大家前来体验,后期也会添加其他的新功能哦【区别】:微信小程序的代码与QQ小程序的源码是不一样的。微信小程序的源码基于微信小程序云开发,需要在有网络的情况下使用,具有同步功能,所有记录在删除小
秃头王路飞 秃头王路飞
2年前
微信原生小程序如何修改第三方样式
一级标题微信原生小程序如何修改第三方样式env:1.微信原生小程序(基础库2.272)2.tdesignminiprogram(最低基础库版本^2.6.5)近期在写微信原生小程序,有一个需求就是去修改一个第三方的库的样式,在写的
梦
4年前
微信小程序new Date()转换时间异常问题
微信小程序苹果手机页面上显示时间异常,安卓机正常问题image(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/b691e1230e2f15efbd81fe11ef734d4f.png)错误代码vardate'2021030617:00:00'vardateT
Easter79 Easter79
3年前
Taro小程序自定义顶部导航栏
微信自带的顶部导航栏是无法支持自定义icon和增加元素的,在开发小程序的时候自带的根本满足不了需求,分享一个封装好的组件,支持自定义icon、扩展dom,适配安卓、ios、h5,全面屏。我用的是京东的Taro多端编译框架写的小程序,原生的也可以适用,用到的微信/taro的api做调整就行,实现效果如下。!在这里插入图片描述(https://i
Wesley13 Wesley13
3年前
5G消息与微信小程序互联互通?北京国都互联这么做……
最近微信小程序上线了一个超级流量的新入口URLScheme,据微信官网介绍,scheme码适用于短信、邮件、外部网页等拉起小程序的业务场景。通过小程序页面的URLScheme,可以在短信、邮件或微信外部的网页中打开微信小程序。意义在于将微信流量生态延伸到微信以外渠道,进一步完善了小程序和外部渠道互通的营销场景。北京国都互联第一时
E小媛同学 E小媛同学
1年前
如何将快递物流查询API集成到微信小程序中
在数字化时代,微信小程序为用户提供了便捷的服务体验。其中,快递物流查询是一个高频需求功能。本文将指导你如何将快递物流查询API集成到微信小程序中,为用户提供实时的物流跟踪服务。
曼成 曼成
1年前
一文教你如何在小程序中快速接入验证码短信API
在微信小程序中接入验证码短信API,可以为用户提供便捷的验证服务。本文将详细介绍如何在小程序中实现这一功能,包括UI设计、API请求以及代码实现。