附上自定义主题链接https://element.eleme.cn/#/zh-CN/component/custom-theme
一.安装
首先vue-cli脚手架+elementui
然后
npm i element-theme -g //安装主题工具
npm i element-theme-chalk -D //安装白垩主题
et -i //初始化变量文件
执行后当前目录会有一个 element-variables.scss 文件
image.png
使用方式1：
在项目的入口文件中
import Vue from 'vue'
import Element from 'element-ui'
import './element-variables.scss' //不执行et编译的话可以这样使用
Vue.use(Element)
这里有一个指的注意的地方：
需要在element-variables.scss文件中，写入以下内容：
否则样式加载不粗来
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
使用方式2：
或者你可以命令行et
et
> ✔ build theme font
> ✔ build element theme
然后在项目的入口文件中和引入默认主题一样，在代码里直接引用「在线主题编辑器」或「命令行工具」生成的主题的 theme/index.css 文件即可。
import '../theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'
Vue.use(ElementUI)
二.修改
官网上提到：
element-variables.scss 文件。内部包含了主题所用到的所有变量，它们使用 SCSS 的格式定义。
我当时天真的相信了
$--color-primary: #409EFF !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
$--color-success: #67c23a !default;
$--color-warning: #e6a23c !default;
$--color-danger: #f56c6c !default;
$--color-info: #909399 !default;
...
对于自己主题用到的颜色 直接再里边更改即可
注意：官网上提供了在线定制工具 但是这个工具所能改的并不全面
后来放到项目上之后，还是发现一些不太合适的地方。例如一些弹出框的关闭按钮颜色不是于其效果啊，默认的按钮颜色：hover时候反差太大啊。感觉被欺骗了。
于是乎一怒之下下载了elementUI的源码。
果然，ele没有骗我。变量全是在上边说道的scss中定义的。
but好多组件上颜色指定的都是基础变量
$--color-success: #67c23a !default;
$--color-warning: #e6a23c !default;
$--color-danger: #f56c6c !default;
$--color-info: #909399 !default;
这就导致了你需要很长的时间取调教它，我也不知道是不是ele和我们的设计师有冲突。反复调教。
个别的地方也是没有设置颜色变量的 比如弹框的header部分的背景色之类的。
so最终解决方案是开发时个别地方直接写css进行覆盖（开始有考虑改源码，但是看了看设计师，心想还是算了，冲突起来没完没了的太麻烦。）
