在app.json
中設定"darkmode": true
// app.json { ... "darkmode": true }
在根目錄新主題設定檔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
兩個屬性,裡層命名自訂,沒有嚴格要求。
app.json
中套用設定屬性在設定屬性以@
開頭拼接theme.json
中自訂的名字寫入配置,範例如下
// app.json { ... "window": { "navigationBarBackgroundColor": "@navBackgroundColor", "navigationBarTitleText": "小书包大梦想", "navigationBarTextStyle": "@navTextStyle" }, "darkmode": true, "themeLocation": "theme.json" }
配置完些,接著手機開啟暗黑模式(深色模式)後,小程式會根據你配置的顏色進行轉換。
wxss
中,支援透過媒體查詢 prefers-color-scheme
來適應不同主題。
如下樣式會在正常模式下頁面背景為灰白色,暗黑模式下為黑色。
/* 正常模式下应用的样式 */ page{ background: #f1f1f1; } /* 暗黑模式下应用的样式 */ @media (prefers-color-scheme: dark) { page{ background: #000000; } }
推薦教學:《微信小程式》
以上是微信小程式 暗黑模式的詳細內容。更多資訊請關注PHP中文網其他相關文章!