Element UI css 变量主题

步骤

• 编写 color-map.scss, sass 变量对应颜色的样式
• 生成 sass 变量对应颜色的 color-map.scss -> color-map.css 和主题样式
• 根据 color-map 生成 css 变量颜色的 map (colorMapData)
• 使用 colorMapData 将主题颜色替换成 css 变量
• 清理临时文件

命令

yarn build

使用方式

可以通过 npm 安装，并引入

yarn add @yzfe/element-ui-var-themes

// 2.4.11 版本
import '@yzfe/element-ui-var-themes/dist/2.4.11/index.css'
// 2.10.1 版本
import '@yzfe/element-ui-var-themes/dist/2.10.1/index.css'

也可以通过 cdn link 的方式

<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@yzfe/[email protected]/dist/2.10.1/index.css"
/>

修改 css 变量

Element UI 默认的颜色已经抽离成 css 变量，定义在 :root(也就是 html) 元素那里，可以通过控制台看到可以自定义的变量。全局修改方式是在 body 中重置变量的值。也可以在任意组件中修改这个变量。

body {
    --el-color-primary: red;
}