給Gitee小程序加上暗黑模式是什麼體驗

前段時間利用空餘時間基於 Gitee OpenApi 寫了一個微信上的碼雲第三方非官方微信小程序，收穫了一部分用戶，一直想給它懟上跟隨系統自動變化的暗黑模式，今天總算有時間給搞了。

實現原理

全部代碼均在Gitee/Github開源，歡迎Star~ Gitee | Github

全部代碼基本沒碰到JavaScript部分，也沒有使用小程序的API進行操做，全程使用媒體查詢與環境變量實現，以下：

原始小程序部分

在小程序源代碼根目錄新建 theme.json 文件，用於保存暗黑模式和普通模式下的一些顏色值和配置：

{
  "light": {
    "backgroundColor": "#f5f5f5",
    "backgroundTextStyle": "dark",
    "backgroundColorTop": "#f5f5f5",
    "backgroundColorBottom": "#f5f5f5",
    "navigationBarBackgroundColor": "#f5f5f5",
    "navigationBarTextStyle": "black"
  },
  "dark": {
    "backgroundColor": "#222",
    "backgroundTextStyle": "light",
    "backgroundColorTop": "#222",
    "backgroundColorBottom": "#222",
    "navigationBarBackgroundColor": "#222",
    "navigationBarTextStyle": "white"
  }
}

同時將這個配置文件引入到 app.json 中：

{
  "darkmode": true,
  "themeLocation": "theme.json",
  "pages": [
  ...
  ],
  "window":[
  ...
  ]
}

這樣，系統在切換顯示模式時，小程序的導航欄部分就會自動跟着變色了 ：）

用戶自定義頁面部分

這部分沒法直接引用這個配置文件的設置，並且可能不少地方有自定義的顏色值，因此這裏須要本身寫媒體查詢了 ：(

這裏編輯 app.wxss 或者每一個頁面單獨的 *.wxss ，固然，我爲了省事，基本都寫在了 app.wxss 中：

@media (prefers-color-scheme: dark) {
    .title{
        color:white; /*將本來黑色的標題在暗黑模式下設置爲白色 這裏就須要各位自行調整顏色了*/
    }
}

收工體驗

歡迎微信搜索 碼雲倉庫 來體驗一下，小程序支持了查看倉庫、Pull Requests、Issues、用戶信息、粉絲關注、通知私信、組織信息等。

你也能夠掃碼體驗：

瞧瞧部分截圖：