前提
看了网上一些针对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");