使用css3 var()实现html主题皮肤设置

日常我们使用换肤时，一般采用以下方案之一；
1，常见用法，以elemntui为例，是换了一个引入的css主题文件
2，使用less或者sass这样的css预处理器，在主less文件中写入变量，使用的时候也使用变量继承
3，后端保存样式，通过接口返回给前端，前端重新渲染
4，其他……

本次主要针对第三种方案进行了研究，也使用方案2的精神

搜索html，var() ，许多教程都提示要写在:root选择器下，实则并不是，根据我的测试结果，理论上来说任意标签都可以，写在:root、html或者body下，只是为了更好的全局使用，毕竟这些选择器优先级很高。

写法1：在app.vue中注册一个变量，我这里选择注册在id=”app”上

写法2：使用document.body.style.setProperty注册属性在body上
这个方法有一个好处，在其他页面，如果需要在js(不是css)中获取某些颜色时，可以用getPropertyValue拿到

扩展：
var可以支持两个属性，如上文未注册testColor，但是使用了，可以多设置一个默认颜色。