vite-plugin-element-plus-theme

适用于 vite 项目，用于实现 element-plus 的主题静态编译，动态切换

适用场景

• 使用 vite 开发的项目
• ui 框架是 element plus
• 有类似主题切换的需求

element plus 版本	插件版本
1.3.0-beta.10	0.0.5

快速创建一个主题切换的示例项目

1# 安装 vite-template-cli
2npm i @pzy915/vite-template-cli -g

3
4# 通过vite-template-cli命令创建一个支持element-plus主题切换的基础项目
5vite-template

6
7# 选择如下模板，创建示例项目

8> element-plus项目模板: 在vue3-element-plus模板基础上, 再加入主题切换功能

9
10# 使用你喜欢的编辑器打开项目, 通过如下命令运行项目
11npm run dev

12
13# 运行成功之后，打开浏览
14http://localhost:3000/demo/hello

15
16# 选择 `查看ElementPlus示例`

17
18# 点击 `切换到定制主题` 或 `切换回默认主题` 查看主题切换效果

使用方式

主题定制

• 项目根目录创建themes文件夹
• themes文件夹下创建主题文件,文件名(不包含后缀)既是主题唯一标识.如:custom-theme.scss
• 主题文件内容大概如下:

1@forward "./common/var.scss" with (
2  $colors: (
3    "primary": (
4      "base": #003261,
5    ),
6    "success": (
7      "base": #21ba45,
8    ),
9    "warning": (
10      "base": #f2711c,
11    ),
12    "danger": (
13      "base": #db2828,
14    ),
15    "error": (
16      "base": #db2828,
17    ),
18    "info": (
19      "base": #42b8dd,
20    ),
21  ),
22  $button-padding-horizontal: (
23    "default": 80px,
24  )
25);

主题切换

1const codeTheme = "主题唯一标识";
2const sucCall = () => {
3  // TODO 实现对根节点的rerender
4};
5const failCall = () => {
6  // TODO 实现在主题文件加载失败时的处理
7};
8// changeTheme 函数由主题插件自动注入
9window.changeTheme(codeTheme, sucCall, failCall);

实现原理

看官方有个示例项目, 可以在开发时调整主题, 修改原理是, 根据 sass 变量值可以被覆盖的的特点, 进行主题变量值覆盖. https://github.com/element-plus/unplugin-element-plus/blob/main/examples/vite/src/styles/element/index.scss

我这个插件的实现思路, 也是使用 sass 变量值覆盖的特点.

1. 读取用户配置的主题变量覆盖文件的内容
2. 读取/项目根目录/node_modules/element-plus/theme-chalk/src/index.scss文件内容
3. 将 步骤 1 中读取的内容,追加到 步骤 2 的内容之前, 进行 sass 变量覆盖.
4. 使用 sass 编译最终的 sass 文件内容, 生成对应主题的 css
5. 项目中进行主题切换时, 引入不同的主题 css 即可

上面是主题样式全量打包的实现思路, 按需打包的实现思路也类似

特点

• 支持使用原生 sass 语法进行样式变量定制
• 次级颜色自动计算
• 根据配置的不同, 主题样式支持按需和全量两种方式打包

注意点

不知道从 element-plus 的哪个版本开始，element-plus 内部使用主题变量的方式已经改变，必须在主题样式引入之成功后，对根节点进行一次 rerender 才能真正实现主题切换,sucCall 的回调函数就是用来给用户自行实现根节点的 rerender 的