Element2.x主题自定义

前提

看了网上一些针对Element2.x版本主题更换的方式,大部分都是采用样式覆盖的方法实现的，要不就是通过less变量方法来进行主题更换,都不是很满意，然后就写了这个主题更换，可以实时更换你想要的色彩。

原理:通过提取主题色修改成CSS变量，进行色值的更改。

安装

npm i element-theme-css

webpack插件引入

const ElementCssReplaced = require("element-theme-css");
plugins: [
    new ElementCssReplaced(),
]

更换颜色

<!-- 引入 -->
import {setTheme} from "element-theme-css/lib";
<!-- 使用设置颜色 #000 #000000 red -->
setTheme("#000000");

效果如下

源码地址:https://github.com/dongxingpeng/element-theme-css.git