elementui颜色
Element UI 默认颜色主题
Element UI 默认使用一套简洁的蓝色系主题，主要颜色包括：
- 主色调：
#409EFF - 成功色：
#67C23A - 警告色：
#E6A23C - 危险色：
#F56C6C - 信息色：
#909399
自定义主题颜色
通过修改 SCSS 变量可以覆盖默认主题色。新建一个 SCSS 文件（如 element-variables.scss）并定义以下变量：
$--color-primary: #FF4500; /* 替换主色调为橙色 */
$--color-success: #5cb85c; /* 修改成功色 */
@import '~element-ui/packages/theme-chalk/src/index';在项目中引入该文件替代默认样式：
import Vue from 'vue';
import ElementUI from 'element-ui';
import './element-variables.scss'; // 引入自定义主题
Vue.use(ElementUI);在线主题生成工具
Element UI 提供官方主题生成器：
- 访问 Element Theme Generator
- 通过颜色选择器调整各状态颜色
- 下载生成的主题包并解压到项目目录
- 在
main.js中引入生成的 CSS 文件
动态切换主题
使用 element-theme-chalk 的 theme-chalk CSS 变量实现运行时主题切换：
// 修改CSS变量值
document.documentElement.style.setProperty('--el-color-primary', newColor);或通过第三方库如 element-themify 实现更复杂的动态主题管理。
颜色使用规范
组件状态对应的颜色类名：
- 主按钮：
.el-button--primary - 成功提示：
.el-message--success - 警告通知：
.el-notification--warning - 错误表单验证：
.el-form-item__error
可通过这些类名覆盖特定场景下的颜色样式。
