vue 项目如何实现切换主题

需求：用户通过取色器选择自己喜欢的颜色，替换项目中的主题色

实现效果：

 

实现思路：

在项目中使用的是less，使用@themeColor定义了主题色，便想着尝试用js修改less的变量即可，但查询了一下只知道有less.modifyVars方法可以修改，但没有详细的说明，顺便查到了可以修改js可以修改原生css的变量，而且简单易懂，便尝试使用css来定义主题色并设置修改。

首先在App.vue中设置主题色：

<style lang="less">
#app {
    --themeColor:#008cff;
}
</style>

 和使用less并不冲突，使用--定义变量有自己的作用域，所以最好在根目录定义，这里我选择App.vue的#app父容器中定义。

定义好之后怎么使用呢，只需要在子组件的style中使用var(--themeColor)即可使用。

<style lang="less">
.z-header-container {
    width: 100%;
    height: 66px;
    //background: #fff;
    text-align: center;
    background: var(--themeColor);
}
</style>

接下来便是怎么让用户能够来修改这个主题色，首先想到