自定义 element-ui 主题色

方案一:

如果仅希望更换 Element 的主题色，推荐使用在线主题生成工具。生成工具的地址:

https://elementui.github.io/theme-chalk-preview/#/zh-CN

点击切换主题色,替换成项目UI的主题色

切换成功之后,“下载主题” 的按钮会高亮,点击下载主题,下载的压缩包是生成的主题颜色样式文件,将文件解压之后,拖入你的项目之中,然后修改 main.js 中 element 样式的引入地址为你拖入的文件

import ElementUI from "element-ui";

// 使用在线配置主题配置工具,配置好主题颜色,生成主题包,引入main.js 那么之前的包就不需要了
// import "element-ui/lib/theme-chalk/index.css";

// 新的主题包
import './assets/css/theme/index.css'

Vue.use(ElementUI);

然后刷新页面,就完成了!

方案二:

element 的 theme-chalk 是使用 SCSS,如果你的项目也刚巧是使用的 SCSS,那么恭喜你,就不需要上面那么繁琐的操作啦.
第一步:在你项目里面创建一个 element-variables.scss 文件,文件的内容如下

/* 改变主题色变量为你想要的颜色 */
$--color-primary: #bf0008;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

/*  引用路径为你的主题样式包的 index.css 文件的相对路径 */
@import "~element-ui/packages/theme-chalk/src/index";

第二步:创建文件成功之后,在 main.js 引入文件

import ElementUI from 'element-ui';

// import "element-ui/lib/theme-chalk/index.css";

// 引用路径为你的 scss 文件的相对路径
import './assets/common/style/element-variables.scss'

Vue.use(ElementUI);

然后刷新页面,就完成了!