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

废话少说，先看效果

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