自定义elementui主题

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。操作步骤如下：

1. 安装主题生成工具：npm i element-theme -g
2. 创建临时目录：mkdir element-theme
3. cd element-theme
4. 安装白垩主题：npm i element-theme-chalk -D
5. 初始化变量文件：et -i
6. 根据自己需要，修改element-variables.scss 文件
7. 编译主题：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'