elementui配色

Element UI 默认配色方案

Element UI 默认采用一套清新、中性的配色方案，主要包含以下颜色值：

• 主色调：#409EFF（蓝色）
• 成功色：#67C23A（绿色）
• 警告色：#E6A23C（橙色）
• 危险色：#F56C6C（红色）
• 信息色：#909399（灰色）

自定义配色方法

通过 SCSS 变量覆盖 在项目中创建 SCSS 文件（如 element-variables.scss），覆盖默认变量：

$--color-primary: #FF6600;
$--color-success: #00CC66;
$--color-warning: #FF9900;
$--color-danger: #FF3333;
$--color-info: #999999;

@import "~element-ui/packages/theme-chalk/src/index";

使用在线主题生成器 Element UI 官方提供主题生成工具（https://element.eleme.io/#/zh-CN/theme），可通过可视化界面调整颜色并下载定制主题。

配色规范建议

• 主色不超过 3 种，建议采用 60-30-10 比例分配
• 文字颜色保持足够对比度（WCAG 2.0 AA 级标准要求至少 4.5:1）
• 状态色系保持明度梯度一致，例如：

  $--button-success-hover-color: mix($--color-white, $--color-success, 20%);

暗色模式适配

通过 CSS 变量实现动态主题切换：

:root {
  --el-color-primary: #409EFF;
}
.dark-mode {
  --el-color-primary: #3375B9;
}

配色资源推荐

• Adobe Color（https://color.adobe.com）：专业配色工具
• Coolors（https://coolors.co）：快速生成配色方案
• Material Design 调色板（https://material.io/design/color）：提供标准色板参考