Element-UI 用命令行主题工具修改主题色

黎轩栀海2026-01-22 9:16

安装 element-theme 和 element-theme-chalk

复制代码

npm install element-theme -g
npm install element-theme-chalk -g

使用 et 命令行工具

安装完成后，你可以使用 et 命令来生成自定义主题。例如，如果你想生成一个新的主题，你可以运行：

复制代码

et -i src/styles/theme/element-variables.scss

这里的 src/styles/theme/element-variables.scss应该是一个包含你的自定义变量（如颜色、尺寸等）的 CSS 文件。你可以从 Element UI 的官方文档中获取一个基本的变量文件模板，然后根据自己的需求进行修改。

例如，创建一个名为 element-variables.css 的文件，内容如下

css 复制代码

/* Transition
-------------------------- */
$--all-transition: all .3s cubic-bezier(.645,.045,.355,1) !default;
$--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
$--fade-linear-transition: opacity 200ms linear !default;
$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
$--border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1) !default;
$--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;

/* Color
-------------------------- */
/// color|1|Brand Color|0
$--color-primary: #30AA98 !default;
/// color|1|Background Color|4
$--color-white: #FFFFFF !default;
/// color|1|Background Color|4
$--color-black: #000000 !default;

修改你想要改成的主题色

然后运行：

css 复制代码

et -c src/styles/theme/element-variables.scss -o src/styles/theme/selfEle

这里我是写入了selfEle文件夹下,这将生成一个新的 CSS 文件在你的当前目录下，包含了使用你自定义变量的 Element UI 样式。