小程序原生开发中一个变量控制页面的主题

废话少说，先看效果

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);
}