最近暗黑模式成為了潮流，微信小程序也推出了暗黑模式适配，下(xià)面來記錄一個(gè)下(xià)适配暗黑模式。

效果圖：

  

一、實現

1、開啟暗黑模式

在 app.json 中(zhōng)配置 "darkmode": true

// app.json
{
    ...
    "darkmode": true
}

2、配置主題文(wén)件

在根目錄新建主題配置文(wén)件 theme.json, 并在 app.json 中(zhōng)配置路(lù)徑引入

// app.json
{
    ...
    "themeLocation": "theme.json"
}

theme.json配置文(wén)件一共分為兩個(gè)屬性，light 和(hé) dark，分别正常模式和(hé)暗黑模式。

theme.json 示例如(rú)下(xià)（僅供參考）：

// theme.json
{
  "light": {
    "navBackgroundColor": "#ffffff",
    "navTextStyle": "black"
  },
  "dark": {
    "navBackgroundColor": "#000000",
    "navTextStyle": "white"
  }
}

必須存在 light 和(hé) dark 兩個(gè)屬性，裡層命名自定義，沒有嚴格要求。

 

3、在app.json中(zhōng)應用配置屬性

在配置屬性以 @開頭拼接theme.json中(zhōng)自定義的名字寫入配置，示例如(rú)下(xià)

// app.json
{
  ...
  "window": {
    "navigationBarBackgroundColor": "@navBackgroundColor",
    "navigationBarTitleText": "小書包大夢想",
    "navigationBarTextStyle": "@navTextStyle"
  },
  "darkmode": true,
  "themeLocation": "theme.json"
}

配置完些，接着手機開啟暗黑模式（深色模式）後，小程序會根據你(nǐ)配置的顔色進行轉換。

 

4、wxss樣式适配暗黑模式

wxss中(zhōng)，支持通(tōng)過媒體查詢 prefers-color-scheme 适配不同主題。

如(rú)下(xià)樣式會在正常模式下(xià)頁面背景為灰白色，暗黑模式下(xià)為黑色。

/* 正常模式下(xià)應用的樣式 */
page{
    background: #f1f1f1;
}
 
 
/* 暗黑模式下(xià)應用的樣式 */
@media (prefers-color-scheme: dark) {
  page{
    background: #000000;
  }
}