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