主要原理是利用 css 变量设置颜色，用 js 动态修改变量，使颜色变化，兼容性如下；
实现换肤之前先要了解一下伪类选择器 :root ，还有css的 var() 函数和 setProperty() 函数
:root 是一个伪类，表示文档根元素，非 IE 及 IE8 及以上浏览器都支持，在 :root 中声明相当于全局属性，只要当前页面引用了 :root 所在的文件，都可以使用css var() 函数来引用；
语法
var() 函数，可以代替元素中，任何属性中的值的任何部分； var() 函数不能作为属性名、选择器或者其他除了属性值之外的值，这样做通常会产生无效的语法或者一个没有关联到变量的值；
语法
setProperty() 方法用于设置一个新的 css 属性，同时也可以修改 css 声明块中已存在的属性，兼容性如下；
语法
如果看了觉得有帮助的，我是@ 鹏多多11997110103 ，欢迎 点赞 关注 评论；END
往期文章
个人主页
小程序实现换肤功能结构<view class='page' id='{{SkinStyle}}'><view class='header'>
<view class='h-skin iconfont {{SkinStyle!=="normal"?"icon-moon":"icon-sun"}}' bindtap='bgBtn'></view>
</view></view>
要模拟一个可修改的根节点page 根据 id='{{SkinStyle}}’ 来配置theme.wxss 每个页面@import 这个theme.wxss#dark .header{}切换按钮全局变量：globalData:{skin:“normal”}. //app.js文件中页面中bgBtn事件bgbtn:function(){ this.setData({
SkinStyle: app.globalData.skin //设置SkinStyle的值
}) wx.setStorage({ //设置storage key: 'skins', data: app.globalData.skin,
})}页面的Page中的onLoad事件里，读取storage并设置SkinStyle的值onLoad: function (options) { var that=this
wx.getStorage({
key: 'skins',
success: function(res) {that.setData({ SkinStyle: res.data }) }, })}
