微信小程序 DarkMode適配指南
若您想為您的小程序添加 DarkMode 適配功能,可以參考以下指南:
1. 開啟 DarkMode
在 app.json 中將 darkmode 設(shè)置為 true,表示小程序已經(jīng)適配了 DarkMode。此時(shí)小程序中的組件,包括導(dǎo)航欄和選項(xiàng)卡都會(huì)自動(dòng)切換到與系統(tǒng)主題相匹配的默認(rèn)樣式。
2. 相關(guān)配置
當(dāng)設(shè)置了 app.json 中的 darkmode 屬性為 true 后,我們可以通過定義變量來設(shè)置特定顏色或圖標(biāo)。具體方法如下:
- 在 app.json 中配置 themeLocation,指定變量配置文件 theme.json 的路徑。
- 在 theme.json 中定義相關(guān)變量。
- 在 app.json 或頁面配置中可以通過 @ 號(hào)引用變量。
支持通過變量配置的屬性包括:
- 全局配置的 window 屬性與頁面配置下的屬性 navigationBarBackgroundColor、navigationBarTextStyle、backgroundColor、backgroundTextStyle、backgroundColorTop、backgroundColorBottom。
- 全局配置 Window.tabBar 屬性中的 color 、 selectedColor、backgroundColor、borderStyle、list、iconPath、selectedIconPath。
變量配置文件示例:theme.json
請(qǐng)根據(jù)需求在此配置顏色主題相關(guān)的變量:
屬性 | 類型 | 必填 | 描述 |
---|---|---|---|
light | object | 是 | 淺色模式下的變量定義 |
dark | object | 是 | 深色模式下的變量定義 |
在定義好變量后,可以在全局配置或頁面配置的相關(guān)屬性中以 @ 開頭引用這些變量。
配置示例:
1. 在 app.json 中設(shè)置如下:
"window": {
"navigationBarBackgroundColor": "@navBgColor",
"navigationBarTextStyle": "@navTxtStyle"
},
"tabBar": {
"color": "@tabFontColor",
"selectedColor": "@tabSelectedColor",
"backgroundColor": "@tabBgColor",
"borderStyle": "@tabBorderStyle",
"list": [{
"iconPath": "@iconPath1",
"selectedIconPath": "@selectedIconPath1"
},
{
"iconPath": "@iconPath2",
"selectedIconPath": "@selectedIconPath2"
}]
}
2. 定義變量
{ "light": { "navBgColor": "#f6f6f6", "navTxtStyle": "black", "tabFontColor": "#000000", "tabSelectedColor": "#3cc51f", "tabBgColor": "#ffffff", "tabBorderStyle": "black", "iconPath1": "image/icon1_light.png", "selectedIconPath1": "image/selected_icon1_light.png", "iconPath2": "image/icon2_light.png", "selectedIconPath2": "image/selected_icon2_light.png" }, "dark": { "navBgColor": "#191919", "navTxtStyle": "white", "tabFontColor": "#ffffff", "tabSelectedColor": "#51a937", "tabBgColor": "#191919", "tabBorderStyle": "white", "iconPath1": "image/icon1_dark.png", "selectedIconPath1": "image/selected_icon1_dark.png", "iconPath2": "image/icon2_dark.png", "selectedIconPath2": "image/selected_icon2_dark.png" } }
<本文由himall原創(chuàng),商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)標(biāo)明:himall原創(chuàng)>
滿足不同行業(yè)發(fā)展電商的需求,HiMall更有針對(duì)性的提供不同行業(yè)內(nèi)的電商解決方案
-
跨境電商解決方案
支持直郵/保稅模式
對(duì)接海關(guān)/保稅倉
支持多國國際語言
對(duì)接Paypal國際支付
幫助跨境外貿(mào)企業(yè)搭建跨境進(jìn)口/出口電商平臺(tái),搶占國際電商市場(chǎng),針對(duì)企業(yè)需求定制個(gè)性化跨境電商解決方案 -
分賬解決方案
迎合金融監(jiān)管要求
規(guī)避“二清”結(jié)算
節(jié)約平臺(tái)財(cái)務(wù)成本
降低平臺(tái)招商成本
在合法、合規(guī)的前提下,為電商平臺(tái)提供資金收付、賬戶管理、資金合規(guī)等一體化整體解決方案 -
B2B批發(fā)解決方案
多級(jí)階梯批發(fā)價(jià)
布局全渠道批發(fā)入口
專屬批發(fā)訂貨市場(chǎng)
銀聯(lián)B2B大額支付
為企業(yè)快速搭建綜合性B2B批發(fā)電商平臺(tái),整合線下批發(fā)資源,拓展線上批發(fā)渠道,實(shí)現(xiàn)批發(fā)業(yè)務(wù)24小時(shí)在線經(jīng)營
-
MRO工業(yè)品采購平臺(tái)系統(tǒng)|MRO工業(yè)品采購平臺(tái)系統(tǒng)有哪些功能
最新消息:MRO工業(yè)品采購平臺(tái)系統(tǒng) 是一款集產(chǎn)、研、銷于一體的綜合性解決方案,專為解決工業(yè)品企業(yè)的采購難題而設(shè)計(jì)。該系統(tǒng)通過...詳情
-
電子元器件采購商城系統(tǒng)|電子元器件采購商城系統(tǒng)有哪些功能
最新消息:電子元器件采購商城系統(tǒng) 是專為滿足電子元器件行業(yè)復(fù)雜業(yè)務(wù)流程需求而設(shè)計(jì)的綜合性平臺(tái)。它不僅提供了全面的技術(shù)支持...詳情
【本站聲明】
1、本網(wǎng)站發(fā)布的該篇文章,目的在于分享電商知識(shí)及傳遞、交流相關(guān)電商信息,以便您學(xué)習(xí)或了解電商知識(shí),請(qǐng)您不要用于其他用途;
2、該篇文章中所涉及的商標(biāo)、標(biāo)識(shí)的商品/服務(wù)并非來源于本網(wǎng)站,更非本網(wǎng)站提供,與本網(wǎng)站無關(guān),系他人的商品或服務(wù),本網(wǎng)站對(duì)于該類商標(biāo)、標(biāo)識(shí)不擁有任何權(quán)利;
3、本網(wǎng)站不對(duì)該篇文章中所涉及的商標(biāo)、標(biāo)識(shí)的商品/服務(wù)作任何明示或暗示的保證或擔(dān)保;
4、本網(wǎng)站不對(duì)文章中所涉及的內(nèi)容真實(shí)性、準(zhǔn)確性、可靠性負(fù)責(zé),僅系客觀性描述,如您需要了解該類商品/服務(wù)詳細(xì)的資訊,請(qǐng)您直接與該類商品/服務(wù)的提供者聯(lián)系。