用途:该技能提供 Element Plus 的颜色设计规范,帮助在构建界面时理解并正确套用其调色板,保持产品视觉一致。适用时机包括:了解颜色体系、正确应用品牌色、使用语义色(成功、警告、危险、信息)、以及为文字与背景选择中性色。
主要能力:给出主色(--el-color-primary #409eff)及其 light-3/5/7/8/9 与 dark-2 变体,用于悬停、浅色变体、背景、浅背景、极浅背景与激活态;给出成功(#67c23a)、警告(#e6a23c)、危险(#f56c6c)、信息(#909399)四组语义色及各自的 light-3/5/7/8/9 与 dark-2 变体;给出中性色,包括文字色(primary #303133、regular #606266、secondary #909399、placeholder #a8abb2、disabled #c0c4cc)与背景/填充色(--el-bg-color #ffffff、--el-bg-color-page #f2f3f5、--el-bg-color-overlay #ffffff,以及 --el-fill-color 系列)。
使用方式:通过 CSS 变量引用颜色,例如语义状态用 color: var(--el-color-success) 搭配 background-color: var(--el-color-success-light-9);文字层级用 --el-text-color-primary 表示标题、--el-text-color-regular 表示正文、--el-text-color-secondary 表示说明文字、--el-text-color-placeholder 表示占位符。
最佳实践与限制:始终使用预定义颜色变量以保持一致;按语义用途选用对应颜色;用文字色变量建立视觉层级;深色模式下颜色会自动调整;可通过覆盖主色匹配品牌。资料未提供安装命令、版本要求、平台限制或收费信息。