vue3.2+element-plus实现el组件和页面换肤，组件交互hover、focus等换肤效果

前言：

如果只是想修改element-plus的颜色，可以参考我之前的一篇文章，修改.scss文件实现。
但如果想动态换肤，scss文件需要编译，没有找到可以切换scss实现换肤的办法，不过官方有给出另外的办法，所有的element组件样式，都有css的变量var写法。
之前也参考也其他文章的做法，但是有个不足，都没有讲到怎样修改组件交互的颜色，类似hover、focus

需求

根据设计提供的深色设计稿换肤。（注意：如果只是想要深色皮肤，element官方有dark模式）。本文属于定制化换肤

实现思路

在两个类名class1和class2下分别定义不同皮肤变量，都引入到全局，通过元素切换不同class来切换样式，这个元素包含需要换肤的页面元素，比如html、body、#app，我用的body

代码

在项目下新建深色和浅色两个scss/css文件，我选scss因为这种格式编辑器支持嵌套高亮

theme-default.scss

:root {
  .default{
    // 自定义颜色变量
    --my-color-1: #56e541;
    --my-color-2: #f94646;
    --my-color-3: #ff9720;
    --my-color-4: #00a7ff;
    --my-color-5: #1AEEEE;
    // 覆盖element-plus颜色变量
    --el-color-white: #ffffff;
    --el-color-black: #000000;
    --el-color-primary: #2cd7ff;
    --el-color-primary-light-3: #6be3ff;
    --el-color-primary-light-5: #96ebff;
    --el-color-primary-light-7: #c0f3ff;
    --el-color-primary-light-8: #d5f7ff;
    --el-color-primary-light-9: #eafbff;
    --el-color-primary-dark-2: #23accc;
    --el-color-success: #2fd72f;
    --el-color-success-light-3: #6de36d;
    --el-color-success-light-5: #97eb97;
    --el-color-success-light-7: #c1f3c1;
    --el-color-success-light-8: #d5f7d5;
    --el-color-success-light-9: #eafbea;
    --el-color-success-dark-2: #26ac26;
    --el-color-warning: #f3e900;
    --el-color-warning-light-3: #f7f04d;
    --el-color-warning-light-5: #f9f480;
    --el-color-warning-light-7: #fbf8b3;
    --el-color-warning-light-8: #fdfbcc;
    --el-color-warning-light-9: #fefde6;
    --el-color-warning-dark-2: #c2ba00;
    --el-color-danger: #f31d00;
    --el-color-danger-light-3: #f7614d;
    --el-color-danger-light-5: #f98e80;
    --el-color-danger-light-7: #fbbbb3;
    --el-color-danger-light-8: #fdd2cc;
    --el-color-danger-light-9: #fee8e6;
    --el-color-danger-dark-2: #c21700;
    --el-color-error: #f56c6c;
    --el-color-error-light-3: #f89898;
    --el-color-error-light-5: #fab6b6;
    --el-color-error-light-7: #fcd3d3;
    --el-color-error-light-8: #fde2e2;
    --el-color-error-light-9: #fef0f0;
    --el-color-error-dark-2: #c45656;
    .el-table {
      --el-table-header-bg-color: #0b3d54;
      --el-table-header-text-color: var(--my-color-1);
    }
  }
}

theme-light.scss
把上面完全复制一份，颜色逐个改为对照浅色

:root {
	 .light{
	 	……
	 }
}

重点

上面“–el-color-”，这些颜色就包含了element-plus hover、focus等交互时候的颜色，那么怎么来的呢，是根据主色调计算生成的。
下面说下怎么获取生成颜色：

1、在assets/css目录下新建elementplus.scss文件，放入代码

如下代码，代码里的颜色，就是ele-plus的主要颜色，改为设计图的主题色、成功、警告、危险颜色。其他需要改的去node_modules里找，路径element-plus/theme-chalk/src/common/var.scss。
如果看不懂，参考下这篇文章

……
//vite.config.ts
export default defineConfig(({ command}) => {
  return {
    resolve: {
      alias: {
        "@": resolve(__dirname, "src")
      },
      extensions: [".js", ".json", ".ts"], // 导入时想要省略的后缀名，.vue等自定义文件不建议省略，影响IDE识别和提示
    },
    
    // 修改element主题色
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use "@/assets/css/elementplus.scss" as *;`,
        },
      },
    },
    
    plugins: [
      ……
    ],
  };
});

@use "sass:map";
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #2CD7FF,
    ),
    'success': (
      'base': #2FD72F,
    ),
    'warning': (
      'base': #F3E900,
    ),
    'danger': (
      'base': #F31D00,
    ),
  )
); 

2、运行项目，打开控制台，选中查看html元素的颜色

这个时候，我们发现，element-plus生成了一组颜色变量，就是我们需要的

3、把:root下边的颜色复制出来，贴进上面的theme-default.scss，就是切换主题需要改变的颜色变量

点击换肤

找到换肤按钮的页面，点击执行以下js

//深色皮肤
document.getElementsByTagName("body")[0].className = ‘default’;
//浅色皮肤
document.getElementsByTagName("body")[0].className = ‘light’;

以上，完