element-plus 更换主题色
场景:
简单的定制主题色,并不需要有按钮切换主题色。
实现:
在项目中新建你的theme.scss,代码如下:
// style/element/index.scss
@forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: ('primary': ('base': #4c8bff,
),
'success': ('base': #13CA50,
),
'error': ('base': #F12B2B,
),
));
// 所有样式:
@use "element-plus/theme-chalk/src/index.scss" as *;
这里只写了我需要的,具体的scss变量可以参照 源码里的var.scss 修改。
然后在你的项目入口文件中,导入这个样式文件以替换 Element Plus 内置的 CSS:
去除原来的 ,替换成你自己的 import 'element-plus/dist/index.css'
import './css/theme.scss'
参照 官方文档