前段时间利用空余工夫基于 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、用户信息、粉丝关注、告诉私信、组织信息等。
你也能够扫码体验: