1、在线主题编辑器
官方提供的在线主题编辑器，可以直观的查看修改后的效果，编辑好下载，然后再引入到项目中。
主题定制
// /assets/styles/index.less
// @import "~element-plus/lib/theme-chalk/index.css";
@import 'theme/index.css';
// main.js
import '@/assets/styles/index.less';
2、命令行主题工具
使用nodejs高版本安装该工具后期执行时会报错primordials is not defined，如下图所示。
报错截图
建议先安装node版本管理工具，再来安装命令行主题工具。
2.1 win10安装nodejs版本管理工具
nvm全名node.js version management，是一个nodejs的版本管理工具。通过它可以安装和切换不同版本的nodejs。
nvm应用程序
下载款选安装包后，解压安装成功后，可进行如下操作：
- 查看本地安装的所有nodejs版本：
nvm list - 安装指定nodejs版本：
nvm install 10.0.0 - 使用指定nodejs版本：
nvm use 10.0.0 - 卸载指定nodejs版本：
nvm unintstall 12.0.0 - 开启nodejs版本切换：
nvm on - 关闭nodejs版本切换：
nvm off
通过node -v查看当前nodejs版本。
2.2 自定义主题
为了使用element-theme主题工具，建议nodejs的版本设置为10.0.0。操作步骤如下：
- 安装主题生成工具：
npm i element-theme -g - 创建临时目录：
mkdir element-theme cd element-theme- 安装白垩主题：
npm i element-theme-chalk -D - 初始化变量文件：
et -i - 根据自己需要，修改element-variables.scss 文件
- 编译主题：
et
编译成功后，会在该目录下生成theme文件夹，引入到项目中就行。
// /assets/styles/index.less
// @import "~element-plus/lib/theme-chalk/index.css";
@import 'theme/index.css';
// main.js
import '@/assets/styles/index.less';
3、修改SCSS变量
elementui样式使用scss来编写的，可以通过修改scss变量来达到改变主题的效果。新建一个样式文件，例如： element-style.scss
3.1 vue2（elementui）
/* 改变主题色变量 */
$--color-primary: teal;
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
3.2 vue3（elementplus）
@forward "element-plus/theme-chalk/src/common/var.scss" with (
$colors: (
'white': #161616,
'black': #161616,
'primary': (
'base': #F85A1F,
),
'success': (
'base': #139705,
),
'warning': (
'base': #F85A1F,
),
'danger': (
'base': #B51212,
),
'error': (
'base': #B51212,
),
'info': (
'base': #161616,
)
),
$background-color-base: #161616 !default,
$border-color-hover: #F85A1F !default,
$border-color: (
'base': #161616,
'light': #D1D1D1,
'lighter': #FBFBFB,
'extra-light': #f2f6fc,
),
$text-color: (
'primary': #FBFBFB,
'regular': #FFE8D1,
'secondary': #D1D1D1,
'placeholder': #8F8F8F,
),
$border-radius: (
'base': 20px,
'small': 20px,
'round': 20px,
'circle': 100%,
)
);
// 如果你想导入所有样式，如下。 如果只是按需导入，则可以忽略以下内容。
@use "element-plus/theme-chalk/src/index.scss" as *;
最后，在项目的入口文件中，直接引入以上样式文件即可：
import './element-style.scss'
