本文介绍两种elementUI切换主题色的方法
项目示例：http://test.ofoyou.com/theme/
git代码：记得star哦，谢谢
1：官方提供的方法，直接修改scss文件达到修改目的，开发人员使用(比官网容易理解，有图有真相)。
2：通过选颜色值在项目中达到换肤目的，用户使用。此方法根据官方主题切换修改而来
先搭建项目：
npm install -g vue //全局安装vue
npm install -g webpack //全局安装webpack
npm install -g vue-cli //全局安装vue-cli
---->
进入项目目录--->
vue-init webpack my-project （vue init webpack my-project 这个官方已不用，使用会报错）
然后一次做下去就好了--->
安装elementUI ：npm i element-ui -S
安装sass: npm install node-sass sass-loader --save-dev
项目结构 -----------------运行结果
1. 第一种方法，官方提供的方法，直接修改scss
在main.js引入elementUI,以及主题：（主题是可以自己设置下载配置的--官方工具）
然后在项目src->assets目录下创建element-variables.scss 内容可以从官网复制过来， 然后在main.js引入，见上图注释的代码
结束第一种，可以随便写几个element组件试试下
2：通过选颜色值在项目中达到换肤目的，根据官方修改主题项目修改而来
说明：项目主题分为两部分，一个是element组件主题，一个是自己定义组件或者DOM主题。
此方法主要思路就是：用户先从线上拉去配置主题的css文件，当用户更改颜色后，在把css文件里面所有的颜色值
替换掉，然后把这个css文件重新插入到html中达到改变颜色。
在这里都需要修改再方法1的基础上进行扩展：在element-variables.scss添加 默认我们自己设置的颜色。
当然这个颜色也可以在其他公共css修改。
2. 安装两个插件：
npm install css-color-function
npm install object-assign
3. 
4. 从 unpkg.com/element-ui/lib/theme-chalk/index.css 把最新css文件复制下来copy到项目静态文件目录中：
因为：项目中是先从element官方拉取主题css,如果拉取不到再去本地找备用的。
5.接下来就是写代码了。在App.vue上引入自定义的修改主题组件，在随便弄些element组件观察变化：
5. 写组件：Theme.vue
1<!-- 切换主题色 --> 2<template> 3 <div> 4 <el-color-picker @change="colorChange" v-model="colors.primary" ></el-color-picker> 5 </div> 6</template> 7<script> 8import generateColors from "../../utils/color"; 9import objectAssign from "object-assign"; 10export default { 11 name: "App", 12 data() { 13 return { 14 originalStylesheetCount: -1,//记录当前已引入style数量 15 originalStyle: "",//获取拿到的.css的字符串 16 colors: { 17 //颜色选择器默认颜色值,这个值要和element-variables一样 18 primary: "#409EFF" 19 }, 20 // primaryColor: "", //提交成功后设置默认颜色 21 cssUrl: [ 22 "//unpkg.com/element-ui/lib/theme-chalk/index.css", 23 "./static/css/index.css" 24 ] 25 }; 26 }, 27 methods: { 28 colorChange(e) { 29 if(!e)return; 30 localStorage.setItem('color',e) 31 this.primaryColor = this.colors.primary; 32 this.colors = objectAssign( 33 {}, 34 this.colors, 35 generateColors(this.colors.primary) 36 ); 37 this.writeNewStyle(); 38 }, 39 writeNewStyle() { 40 let cssText = this.originalStyle; 41 Object.keys(this.colors).forEach(key => { 42 cssText = cssText.replace( 43 new RegExp("(:|\\s+)" + key, "g"), 44 "$1" + this.colors[key] 45 ); 46 }); 47 if (this.originalStylesheetCount === document.styleSheets.length) { 48 // 如果之前没有插入就插入 49 const style = document.createElement("style"); 50 style.innerText = 51 ".primaryColor{background-color:" + this.colors.primary + "}" + cssText; 52 document.head.appendChild(style); 53 } else { 54 // 如果之前没有插入就修改 55 document.head.lastChild.innerText = 56 ".primaryColor{background-color:" + 57 this.colors.primary + 58 "} " + 59 cssText; 60 } 61 }, 62 getIndexStyle(url) { 63 let that = this; 64 var request = new XMLHttpRequest(); 65 request.open("GET", url); 66 request.onreadystatechange = function() { 67 if ( 68 request.readyState === 4 && 69 (request.status == 200 || request.status == 304) 70 ) { 71 // 调用本地的如果拿不到会得到html,html是不行的 72 if (request.response && !/DOCTYPE/gi.test(request.response)) { 73 that.originalStyle = that.getStyleTemplate(request.response); 74 that.writeNewStyle() 75 } else { 76 that.originalStyle = ""; 77 } 78 } else { 79 that.originalStyle = ""; 80 } 81 }; 82 request.send(null); 83 }, 84 getStyleTemplate(data) { 85 const colorMap = { 86 "#3a8ee6": "shade-1", 87 "#409eff": "primary", 88 "#53a8ff": "light-1", 89 "#66b1ff": "light-2", 90 "#79bbff": "light-3", 91 "#8cc5ff": "light-4", 92 "#a0cfff": "light-5", 93 "#b3d8ff": "light-6", 94 "#c6e2ff": "light-7", 95 "#d9ecff": "light-8", 96 "#ecf5ff": "light-9" 97 }; 98 Object.keys(colorMap).forEach(key => { 99 const value = colorMap[key]; 100 data = data.replace(new RegExp(key, "ig"), value); 101 }); 102 return data; 103 } 104 }, 105 mounted() { 106 // 默认从线上官方拉取最新css,2秒钟后做一个检查没有拉到就从本地在拉下 107 let that = this; 108 // 如果是记住用户的状态就需要，在主题切换的时候记录颜色值，在下次打开的时候从新赋值 109 this.colors.primary = localStorage.getItem('color')||this.colors.primary//例如 110 this.getIndexStyle(this.cssUrl[0]); 111 setTimeout(function() { 112 if (that.originalStyle) { 113 return; 114 } else { 115 that.getIndexStyle(that.cssUrl[1]); 116 } 117 }, 2000); 118 this.$nextTick(() => { 119 // 获取页面一共引入了多少个style 文件 120 this.originalStylesheetCount = document.styleSheets.length; 121 }); 122 } 123}; 124</script> 125<style> 126</style>