1、開啟暗黑模式在 app.json 中配置 "darkmode": true// app.json {
... "darkmode": true }
2、配置主題文件在根目錄新建主題配置文件 theme.json, 并在 app.json 中配置路徑引入// app.json {
... "themeLocation": "theme.json" }
theme.json 配置文件一共分為兩個(gè)屬性，light 和 dark，分別正常模式和暗黑模式。
theme.json 示例如下（僅供參考）：
// theme.json {
"light": {
"navBackgroundColor": "#ffffff", "navTextStyle": "black" }
, "dark": {
"navBackgroundColor": "#000000", "navTextStyle": "white" }
}
必須存在 light 和 dark 兩個(gè)屬性，里層命名自定義，沒有嚴(yán)格要求。
3、在 app.json 中應(yīng)用配置屬性在配置屬性以 @ 開頭拼接 theme.json 中自定義的名字寫入配置，示例如下// app.json {
... "window": {
"navigationBarBackgroundColor": "@navBackgroundColor", "navigationBarTitleText": "小書包大夢想", "navigationBarTextStyle": "@navTextStyle" }
, "darkmode": true, "themeLocation": "theme.json" }
配置完些，接著手機(jī)開啟暗黑模式（深色模式）后，小程序會(huì)根據(jù)你配置的顏色進(jìn)行轉(zhuǎn)換。
4、wxss樣式適配暗黑模式wxss 中，支持通過媒體查詢 prefers-color-scheme 適配不同主題。
如下樣式會(huì)在正常模式下頁面背景為灰白色，暗黑模式下為黑色。
/* 正常模式下應(yīng)用的樣式 */ page{
background: #f1f1f1;
}
/* 暗黑模式下應(yīng)用的樣式 */ @media (prefers-color-scheme: dark) {
page{
background: #000000;
}
}
5、效果圖推薦教程：
《微信小程序》以上就是微信小程序 暗黑模式的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標(biāo)簽：
微信小程序本文轉(zhuǎn)載于：
簡書，如有侵犯，請聯(lián)系[email protected]刪除
上一篇：
小程序支付及退款流程詳解
下一篇：
小程序與普通網(wǎng)頁開發(fā)之間的區(qū)別是什么相關(guān)文章相關(guān)視頻微信小程序轉(zhuǎn)發(fā)好友的功能在微信小程序中用戶登錄和登錄狀態(tài)維護(hù)快速實(shí)現(xiàn)一個(gè)微信小程序的Button組件電腦微信小程序設(shè)置全屏的方法是什么？微信小程序 暗黑模式初識(shí)微信小程序(2)初識(shí)微信小程序(3)初識(shí)微信小程序(4) [溫州做小程序]