vue 主题切换深色系和浅色系

vue项目进行主题色切换，主要是echart、element-ui、主题色等三个位置的颜色调整

echart 和element 调用第三方框架进行切换，提前准备好其主题色

本系统主题色需要自己进行代码提取，经过网上查询，本次采用css自定义变量进行颜色主题切换，可参考下面链接

https://wanshi.netlify.app/2019/11/21/2019-11-22-vue%E9%A1%B9%E7%9B%AE%E4%BD%BF%E7%94%A8css%E5%8F%98%E9%87%8F%E5%AE%9E%E7%8E%B0%E4%B8%BB%E9%A2%98%E5%8C%96

https://juejin.cn/post/6844904122643120141
https://www.jianshu.com/p/ec9b20b55143
https://www.jianshu.com/p/35e0581629d2
https://www.jianshu.com/p/fe807f5ef394
https://juejin.cn/post/6844903981517373454
https://blog.csdn.net/chuanjiejue8361/article/details/101012978?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control&dist_request_id=&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control

先实现大体布局颜色的切换

1、当前项目之前用的scss，后面开发也继续用，也可以用less,看个人看好，创建variable.scss,:root是默认浅色主题，theme='dark'是深色系主题

在app.vue中进行引用scss文件，并调用其颜色变量

2、添加主题或移除主题；网上参考

if (!document.documentElement.hasAttribute('theme')) {
    document.documentElement.setAttribute('theme', 'dark');
}else{
    document.documentElement.removeAttribute('theme')
}

3、添加echart、element框架，但两者切换机制不一样，需要分别处理

echart 在调用init方法后直接增加主题参数名称就可以，具体看官网，所以直接保留其主题名称就可以

element 需要切换不同的css文件，目前我没有找到其他比较好的办法，只能走笨办法了，注意，index.css文件存放在static中，否则路径会找不到

主要思路：点击切换，调用vuex中action进行颜色切换并保存在localstorage中，方便下次用户登录保留其主题色