h5页面自定义主题色(vue)


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

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

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

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

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

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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM