elementui颜色

Element UI 默认颜色

Element UI 使用一套基于品牌色的配色方案，主要颜色包括：

• 主色：#409EFF（蓝色，用于按钮、链接等交互元素）
• 成功色：#67C23A（绿色，用于成功状态提示）
• 警告色：#E6A23C（橙色，用于警告类操作）
• 危险色：#F56C6C（红色，用于错误或删除操作）
• 信息色：#909399（灰色，用于辅助文本或次要信息）

自定义主题颜色

通过覆盖 SCSS 变量或使用在线主题生成工具修改默认颜色：

方法1：SCSS 变量覆盖
在项目中创建 SCSS 文件（如 element-variables.scss），覆盖以下变量：

$--color-primary: #FF0000; // 修改主色为红色
$--color-success: #00FF00; // 修改成功色为亮绿色
@import '~element-ui/packages/theme-chalk/src/index';

在入口文件（如 main.js）中引入该文件：

import './element-variables.scss';

方法2：在线主题生成器
访问 Element UI 官方主题生成工具，可视化调整颜色后下载主题包，替换项目中的 theme-chalk 目录。

动态修改主题色

通过 JavaScript 动态修改 CSS 变量（需浏览器支持）：

document.documentElement.style.setProperty('--el-color-primary', '#FF00FF');

确保 Element UI 版本支持 CSS 变量（v2.15.0+）。

颜色使用示例

在组件中直接使用颜色类名：

<el-button type="primary">主色按钮</el-button>
<el-button type="success">成功按钮</el-button>

注意事项

• 自定义主题需重新编译 SCSS，确保项目配置了 sass-loader。
• 动态修改颜色可能影响全局样式，建议结合主题切换功能使用。