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

废话少说，先看成果

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