elementui配色
Element UI 配色方案
Element UI 提供了一套基于 Vue.js 的默认配色方案，主要用于组件库的视觉设计。以下是其核心配色及自定义方法：
默认主题色
- 主色调：
#409EFF（蓝色） - 成功色：
#67C23A（绿色） - 警告色：
#E6A23C（橙色） - 危险色：
#F56C6C（红色） - 信息色：
#909399（灰色）
中性色
- 主要文字：
#303133 - 常规文字：
#606266 - 次要文字：
#909399 - 占位文字：
#C0C4CC - 边框色：
#DCDFE6/#E4E7ED/#EBEEF5/#F2F6FC
自定义主题
-
通过 SCSS 变量覆盖 修改
element-variables.scss文件中的变量：$--color-primary: #FF5722; // 修改主色调为橙色 $--font-path: '~element-ui/lib/theme-chalk/fonts'; @import "~element-ui/packages/theme-chalk/src/index"; -
在线主题生成器 使用官方工具 Element Theme Generator 可视化生成主题，下载后替换项目中的样式文件。
-
命令行工具 安装主题生成工具后通过命令修改：
npm i element-theme -g et --init # 初始化变量文件 et # 编译主题
配色建议
- 主色建议选择饱和度适中的颜色，确保可读性。
- 辅助色与主色保持协调，可通过调色盘工具生成互补色。
- 深色背景避免使用纯黑（如
#000000），推荐使用#1F2D3D等深灰。
暗色模式适配
Element UI 默认未提供暗色主题，需手动覆盖组件样式：
.el-container {
background-color: #222;
color: rgba(255, 255, 255, 0.8);
}
