如何通过后台返回的颜色值，设置前端页面主色调？

Question

需求：
一个vue的单页应用，需要根据后台数据返回的basicColor参数自动修改前端页面主色调（图片除外），
现在前端是使用less编写的，使用less常量定义常用颜色，但是less编译成css后也就不是常量了--|
，也就没办法动态的修改主题色！求一个解决方案

Answer 1

我看iview-admin的换主题功能是写了好几套CSS，根据选择的主题再来动态引入对应的css这种方式来实现的。

Answer 2

有个疑问：一般切换主题色不是前端预设好的么，为什么要后端返数据去渲染呢？那页面在请求到数据之前和之后会有明显的主题跳动问题。
拿到数据再渲染颜色，很明显只能通过js或者css去，巨麻烦。

Answer 3

直接标签上改不也一样么

:style="{ background: color}"


color:red  //换成你需要的

Answer 4

在计算属性computed里写入
computed:{

style:function(){
    return {
        background:'#'+后台返回的basicColor,
    }
}

}
在需要修改的标签位置:style = "style"

Answer 5

只要用的是webpack构建，基本上都可以用webpack-theme-color-replacer这个插件实现动态换肤：
动态切换主题色