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

前言:

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

需求

根据设计提供的深色设计稿换肤。(注意:如果只是想要深色皮肤,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’;

以上,完

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值