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