微信小程序 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)。具體方法如下：

1. 在 app.json 中配置 themeLocation，指定變量配置文件 theme.json 的路徑。
2. 在 theme.json 中定義相關(guān)變量。
3. 在 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)的變量:

在定義好變量后，可以在全局配置或頁面配置的相關(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)>