h5页面自定义主题色（vue）

　　最近接到了个需求，说是要把页面做成可自定义主题色，通过sdk来获取色值，然后前端来展示不同的主题色，这样不同的商家就可以配置不同的颜色了。

　　以前没遇到过，此次遇到了研究下，特此简单记录如下。

　　这里以.vue单文件组件，css写法为例，没有用到css预处理器。

　　在data函数中定义色值。如 myColor: '#fe4d4d' 

　　然后在该组件的根元素上这样写： :style="{'--color': myColor}" 

　　然后在<style scoped>标签里写法如下：例如我要更改.title的样式，那么就可以这样写了 .title{ color:var(--color); }