最近暗黑模式成爲了潮流,微信小程序也推出了暗黑模式適配,下面來記錄一個下適配暗黑模式。
效果圖:
一、實現
1、開啓暗黑模式
在 app.json 中配置 "darkmode": true
// app.json
{
...
"darkmode": true
}
2、配置主題文件
在根目錄新建主題配置文件 theme.json, 並在 app.json 中配置路徑引入
// app.json
{
...
"themeLocation": "theme.json"
}
theme.json配置文件一共分爲兩個屬性,light 和 dark,分別正常模式和暗黑模式。
theme.json 示例如下(僅供參考):
// theme.json
{
"light": {
"navBackgroundColor": "#ffffff",
"navTextStyle": "black"
},
"dark": {
"navBackgroundColor": "#000000",
"navTextStyle": "white"
}
}
必須存在 light 和 dark 兩個屬性,裏層命名自定義,沒有嚴格要求。
3、在app.json中應用配置屬性
在配置屬性以 @開頭拼接theme.json中自定義的名字寫入配置,示例如下
// app.json
{
...
"window": {
"navigationBarBackgroundColor": "@navBackgroundColor",
"navigationBarTitleText": "小書包大夢想",
"navigationBarTextStyle": "@navTextStyle"
},
"darkmode": true,
"themeLocation": "theme.json"
}
配置完些,接着手機開啓暗黑模式(深色模式)後,小程序會根據你配置的顏色進行轉換。
4、wxss樣式適配暗黑模式
wxss中,支持通過媒體查詢 prefers-color-scheme
適配不同主題。
如下樣式會在正常模式下頁面背景爲灰白色,暗黑模式下爲黑色。
/* 正常模式下應用的樣式 */
page{
background: #f1f1f1;
}
/* 暗黑模式下應用的樣式 */
@media (prefers-color-scheme: dark) {
page{
background: #000000;
}
}