小程序原生開發中一個變量控制頁面的主題

廢話少說，先看效果

github地址 經典邏輯推理題（求個關注～～）

---

普通的網頁項目能夠很容易的實現換膚功能，能夠經過js改變link元素中引入的css主題樣式連接。可是微信小程序不能動態改變wxss文件，因此須要其餘的方案來實現。

從網上大體查了一些方案，這兩種方式都須要在wxml頁面中引入不少變量，對於複雜的頁面看起來就不那麼美觀。

1. 爲元素增長一個class後綴，經過更改後綴名稱對應不一樣的類名
2. 配色以對象形式保存在globalData中，每一個頁面中獲取主題色，並在頁面中使用的地方經過style來改變頁面的樣式。

---

思路:
小程序wxss中使用的var變量須要在外層元素的樣式中事先定義好，此時若是改變外層元素中定義變量的位置，就能夠方便的引用不一樣的主題樣式變量。

實現舉例：
只須要在js中動態改變theme變量的值爲全局引用的wxss中定義的主題類名（theme-green，theme-dark)便可動態改變最外層view中的主題樣式。

wxml：
<view class="{{theme}}">
   <view class="title">標題</view>
</view>

wxss:
.title {
  background: var(--title-bg);
}

全局wxss:
.theme-green {
  --text-color: unset;
  --page-bg: rgba(233,251,239,1);
  --title-bg: rgba(184,241,204,0.5);
  
  /** 頁面最外層公用的一些樣式 */
  color: var(--text-color);
  background: var(--page-bg);
}
.theme-dark {
  --text-color: white;
  --page-bg: rgba(0, 0, 0,1);
  --title-bg: rgba(31, 32, 34,1);

  /** 頁面最外層公用的一些樣式 */
  color: var(--text-color);
  background: var(--page-bg);
}