日常我们使用换肤时，一般采用以下方案之一；
1，常见用法，以elemntui为例，是换了一个引入的css主题文件
2，使用less或者sass这样的css预处理器，在主less文件中写入变量，使用的时候也使用变量继承
3，后端保存样式，通过接口返回给前端，前端重新渲染
4，其他……
本次主要针对第三种方案进行了研究，也使用方案2的精神
搜索html，var() ，很多教程都提示要写在:root选择器下，其实并不是，根据我的测试结果，理论上来说任意标签都可以，写在:root、html或者body下，只是为了更好的全局使用，毕竟这些选择器优先级很高。
95cb9962c3ea7ad4bb00c4407ca314cf_9137.png
写法1：在app.vue中注册一个变量，我这里选择注册在id="app"上
b6f6fb053b23e305ea4f5381e2191db.png
fd38282d0fa31949911274aff844994.png
cce648fdf7f8693fdb623428811ffee.png
e8f132c948b78991b7b07f877ee5335.png
72301bedcc8f879c33c7c8265852aea.png
image.png
写法2：使用document.body.style.setProperty注册属性在body上
这个方法有一个好处，在其他页面，如果需要在js(不是css)中获取某些颜色时，可以用getPropertyValue拿到
bdbc32b3d27f9e3ecf6d2308efb55af.png
78ed647149cb4cb98e8341d6d02208c.png
image.png
扩展：
var可以支持两个属性，如上文未注册testColor，但是使用了，可以多设置一个默认颜色。
image.png
image.png
image.png
