- 开启 DarkMode
在app.json
中配置darkmode
为true
,示意开启深色模式 - 配置变量文件
theme.json
, 并在app.json
中配置门路引入
“themeLocation”:”theme.json” -
在
theme.json
中定义相干变量{ "light": { "navigationBarBackgroundColor": "#fff", "navigationBarTextStyle": "black" }, "dark": { "navigationBarBackgroundColor": "#000", "navigationBarTextStyle": "white" } }
-
在
app.json
中利用配置属性,以@
结尾援用变量"window": { "navigationBarBackgroundColor": "@navigationBarBackgroundColor", "navigationBarTitleText": "考研政治定制学", "navigationBarTextStyle": "@navigationBarTextStyle" },
- WXSS 适配,通过媒体查问 prefers-color-scheme 适配不同主题
page {background: #f2f2f2;}
@media (prefers-color-scheme: dark) {
.page {background: #000;}
}
参考:小程序深色模式适配官网文档