vue项目实现换肤（样式、字体、背景）

后台管理项目一般都会加一些主题配色，最近在用vue写一个后台管理系统，也加了一个可以实时改变主题色彩。先看一下效果：

项目的基色，可以通过颜色选择器进行更改：

vue可以实现数据的双向绑定，要想所有的组件都使用可以实时改变的基色，思来想去还是vuex。

1、首先在vuex state里定义一个默认的主题颜色：（baseColor: '#2270e9'）

2、然后把这个state和颜色选择器（我项目使用的element-ui）进行双向绑定。

<el-color-picker v-model="$store.state.baseColor" title="主题"></el-color-picker>

3、在需要根据主题颜色改变的地方，进行数据绑定：

1. 背景颜色 :style="{backgroundColor: $store.state.baseColor}"

2.  

3. 字体颜色 :style="{color: $store.state.baseColor}"

几行代码，一个项目的主题配色就搞定了！

如果想要系统，保持主题配色（刷新还在，页面关了之后才回到默认）可以进行页面关闭监听，然后配合sessionStorage进行使用。如果想一直保持主题配色（刷新、关闭打开还是改变的主题）可以使用localStorage使用。