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

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

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

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

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

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

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-03-30
  • 2021-07-24
  • 2022-01-25
  • 2021-10-09
  • 2021-09-07
  • 2022-12-23
猜你喜欢
  • 2021-07-19
  • 2021-05-12
  • 2022-01-17
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案