最近接到了个需求,说是要把页面做成可自定义主题色,通过sdk来获取色值,然后前端来展示不同的主题色,这样不同的商家就可以配置不同的颜色了。
以前没遇到过,此次遇到了研究下,特此简单记录如下。
这里以.vue单文件组件,css写法为例,没有用到css预处理器。
在data函数中定义色值。如 myColor: '#fe4d4d'
然后在该组件的根元素上这样写: :style="{'--color': myColor}"
然后在<style scoped>标签里写法如下:例如我要更改.title的样式,那么就可以这样写了 .title{ color:var(--color); }