Element Plus 色彩体系详解主色、场景色与中性色的设计与使用【免费下载链接】element-plus A Vue.js 3 UI Library made by Element team项目地址: https://gitcode.com/GitHub_Trending/el/element-plusElement Plus 作为一套面向 Vue 3 的组件库通过一套精心设计的调色板palette为构建的产品提供统一、一致的视觉体验。本篇指南以 docs/en-US/component/color.md 为骨架深入剖析 Element Plus 的三大色彩类别——主色Main Color、场景色Secondary Color与中性色Neutral Color并结合 packages/theme-chalk/src/common/var.scss 等源码揭示其底层实现原理与 CSS 变量生成机制帮助你快速掌握颜色变量、理解深浅色阶的推导规则并在实际项目中正确使用与覆盖这些颜色。色彩体系总览Element Plus 使用一套特定的调色板来指定颜色以确保你构建的产品在外观与体验上保持一致。整套色彩体系划分为三个层次类别用途核心变量主色Main Color品牌色标识性最强的颜色--el-color-primary场景色Secondary Color表达不同语义场景如危险操作--el-color-success/--el-color-warning/--el-color-danger/--el-color-info中性色Neutral Color文本、背景与边框颜色体现层级结构--el-text-color-*/--el-border-color-*/--el-fill-color-*/--el-bg-color-*所有颜色都通过 CSS 变量CSS Vars暴露因此既可以在 SCSS 层通过变量映射进行主题定制也可以直接在运行时用 CSS 覆盖兼顾了编译期定制与运行时换肤两种场景。主色Main ColorElement Plus 的主色是明亮而友好的蓝色其基准值定义在 packages/theme-chalk/src/common/var.scss 中primary: ( base: #409eff, ),#409eff会被编译为 CSS 变量--el-color-primary并在几乎所有组件上承担选中、聚焦、激活、链接等核心交互语义。例如 var.scss 中多个组件的状态色都直接引用它Checkbox 选中态边框与背景色checked-input-border-color: getCssVar(color-primary)Radio 选中态checked-text-color: getCssVar(color-primary)Input 聚焦边框focus-border-color: getCssVar(color-primary)Button 的悬停文字色hover-text-color: getCssVar(color-primary)。主色的色阶体系仅有单一基准色无法支撑完整的视觉层次。Element Plus 通过将基准色与白色/黑色按比例混合派生出完整的浅色阶light与深色阶dark机制定义在 var.scss 的set-color-mix-levelmixin 中mixin set-color-mix-level( $type, $number, $mode: light, $mix-color: $color-white ) { $colors: map.deep-merge( ( $type: ( #{$mode}-#{$number}: roundColor( color.mix( $mix-color, map.get($colors, $type, base), math.percentage(math.div($number, 10)) ) ), ), ), $colors ) !global; }其核心逻辑为以 10% 为步长将白色按比例混入基准色生成light-1至light-9将黑色混入生成dark-2。以主色#409eff为例var.scss 源码注释 明确给出了各色阶的取值// 10% 53a8ff // 20% 66b1ff // 30% 79bbff // 40% 8cc5ff // 50% a0cfff // 60% b3d8ff // 70% c6e2ff // 80% d9ecff // 90% ecf5ff不过最终对外暴露的 CSS 变量并非全部 9 个浅色阶。在 packages/theme-chalk/src/mixins/_var.scss 的set-css-color-typemixin 中只会把以下变量写入编译产物mixin set-css-color-type($colors, $type) { include set-css-var-value((color, $type), map.get($colors, $type, base)); each $i in (3, 5, 7, 8, 9) { include set-css-var-value( (color, $type, light, $i), map.get($colors, $type, light-#{$i}) ); } include set-css-var-value( (color, $type, dark-2), map.get($colors, $type, dark-2) ); }也就是说每个类型最终会生成以下 CSS 变量--el-color-{type}基准色--el-color-{type}-light-3/light-5/light-7/light-8/light-9浅色阶--el-color-{type}-dark-2深色阶官方文档中的主色展示组件 main-color.vue 也印证了这一点它通过useCssVar(--el-color-primary)读取基准色并渲染dark-2与light-3/5/7/8/9共 6 个色阶条点击即可复制对应的primary-*变量名方便开发者直接取用。场景色Secondary Color除了主色不同业务场景需要使用不同的语义色来表达含义——例如危险色标识危险操作、成功色标识成功状态。Element Plus 提供了 4 个场景色类型基准值定义在 var.scss类型基准值语义success#67c23a成功状态warning#e6a23c警告状态danger#f56c6c危险操作如删除info#909399信息提示、次要辅助值得注意的是error与danger的基准值相同均为#f56c6c$types列表中也同时包含danger与error两个类型见 var.scss它们在浅色阶与深色阶的推导上共用同一色值但作为独立变量存在可以单独覆盖。场景色同样会通过set-css-color-type生成完整的浅色阶与深色阶变量如--el-color-success-light-9、--el-color-danger-dark-2。官方文档展示组件 secondary-colors.vue 遍历[success, warning, danger, info]四个类型每个类型渲染基准色块加dark-2/light-3/5/7/8/9色阶条点击可复制对应变量名。场景色的典型应用场景包括el-button typedanger、el-button typesuccess等按钮语义类型el-tag typewarning、el-tag typeinfo等标签类型Alert / Message / Notification 组件的状态图标与背景如 var.scss 中 Message 的背景色使用getCssVar(color, info, light-9)。中性色Neutral Color中性色用于文本、背景与边框通过不同的明度层级来表达界面中的层次结构。中性色不参与主色/场景色那样的语义表达而是承担可读性与结构划分。它由四组变量构成全部定义在 var.scss。文本色Text Color$text-color: ( primary: #303133, // 主文本一级信息 regular: #606266, // 常规文本二级信息 secondary: #909399, // 次要文本辅助信息 placeholder: #a8abb2, // 占位文本如输入框 placeholder disabled: #c0c4cc, // 禁用文本 );对应的 CSS 变量为--el-text-color-primary、--el-text-color-regular、--el-text-color-secondary、--el-text-color-placeholder、--el-text-color-disabled从深到浅构成文本的层级阶梯。边框色Border Color$border-color: ( : #dcdfe6, // 基础边框 light: #e4e7ed, lighter: #ebeef5, extra-light: #f2f6fc, dark: #d4d7de, darker: #cdd0d6, );对应的 CSS 变量为--el-border-color、--el-border-color-light、--el-border-color-lighter、--el-border-color-extra-light、--el-border-color-dark、--el-border-color-darker。填充色Fill Color$fill-color: ( : #f0f2f5, // 基础填充 light: #f5f7fa, lighter: #fafafa, extra-light: #fafcff, dark: #ebedf0, darker: #e6e8eb, blank: #ffffff, // 空白填充 );对应的 CSS 变量为--el-fill-color、--el-fill-color-light、--el-fill-color-lighter、--el-fill-color-extra-light、--el-fill-color-dark、--el-fill-color-darker、--el-fill-color-blank。填充色广泛用于下拉悬停背景如 var.scss 中 Select Option 的hover-background: getCssVar(fill-color, light)、输入框底色、禁用态背景等场景。背景色Background Color$bg-color: ( : #ffffff, // 基础背景 page: #f2f3f5, // 页面背景 overlay: #ffffff, // 浮层背景弹窗、下拉等 );对应的 CSS 变量为--el-bg-color、--el-bg-color-page、--el-bg-color-overlay。此外还有基础黑白变量--el-color-white: #ffffff与--el-color-black: #000000。官方文档的中性色展示组件 neutral-color.vue 完整呈现了上述四组颜色以及基础黑、白、透明色并标注了每个色块的变量值与名称点击可复制变量名是查阅中性色取值的直观工具。色阶的生成原理与 RGB 变量理解了基准色 混合推导的机制后还有一个值得注意的细节Element Plus 还会为每个颜色类型生成 RGB 通道变量。在 _var.scss 中mixin set-css-color-rgb($type) { $color: map.get($colors, $type, base); include set-css-var-value( (color, $type, rgb), #{color.channel($color, red, $space: rgb), color.channel($color, green, $space: rgb), color.channel($color, blue, $space: rgb)} ); }这会生成形如--el-color-primary-rgb: 64, 158, 255的变量。RGB 通道值与rgba()组合使用可以在不改变色相的前提下控制透明度例如实现半透明的遮罩、背景或 hover 效果这也是许多组件内部实现的关键基础。从源码结构还可以推断--el-color-{type}-light-1/2/4/6等中间色阶虽然在编译产物中未直接暴露为变量但它们在 SCSS 层的 map 中仍然存在组件样式在编译期可以直接引用从而避免无谓的 CSS 体积膨胀。自定义颜色覆盖与换肤实战掌握了颜色变量的命名与生成规律后就可以按需定制主题色。Element Plus 提供了两条主流路径详见 docs/en-US/guide/theming.md。方式一通过 SCSS 变量覆盖编译期定制theme-chalk使用 SCSS 编写所有颜色变量的源头都在 packages/theme-chalk/src/common/var.scss。在项目中使用forward覆盖$colorsmap 即可整体更换主色同时保留 light/dark 色阶的自动推导/* just override what you need */ forward element-plus/theme-chalk/src/common/var.scss with ( $colors: ( primary: ( base: green, ), ) ); // If you just import on demand, you can ignore the following content. // if you want to import all styles: // use element-plus/theme-chalk/src/index.scss as *;然后在入口文件中引入该样式文件注意要在 Element Plus 自身样式之前引入避免变量混合问题import { createApp } from vue import ./styles/element/index.scss import ElementPlus from element-plus import App from ./App.vue这里的关键在于自定义primary的base值后light-3/5/7/8/9与dark-2会基于新值重新混合生成全套组件按钮、输入框聚焦态、选中态等随之自动更新无需逐个覆盖。方式二通过 CSS 变量覆盖运行时换肤由于所有颜色最终以 CSS 变量形式暴露也可以直接在样式表中覆盖实现运行时的动态换肤与暗色模式:root { --el-color-primary: #626aef; --el-color-primary-light-3: #8a8bf2; --el-color-primary-dark-2: #4e55bf; }暗色模式的启用方式同样简洁在html上添加dark类并引入暗色变量文件即可详见 docs/en-US/guide/dark-mode.mdhtml classdark head/head body/body /html// if you just want to import css import element-plus/theme-chalk/dark/css-vars.css使用建议与最佳实践基于以上色彩体系的设计逻辑在实际项目中建议遵循以下几点优先使用语义变量而非硬编码色值文本、边框、填充尽量引用--el-text-color-*、--el-border-color-*、--el-fill-color-*系列变量这样在暗色模式或主题切换时能自动适配。场景色用于表达语义成功、警告、危险、信息操作分别使用对应类型变量需要更强视觉反馈时使用基准色需要弱化背景时使用light-9等浅色阶。透明效果使用 RGB 变量需要rgba()半透明场景时优先基于--el-color-{type}-rgb拼接而不是在 SCSS 中对已编译的十六进制色值做运算。色阶取用对照文档文档中的 main-color.vue、secondary-colors.vue、neutral-color.vue 三个展示组件提供了可视化色板与一键复制变量名的能力是开发时的便捷参考。总结Element Plus 的色彩体系是一个结构清晰、机制完备的设计系统主色#409eff定义品牌基调success / warning / danger / info 四个场景色表达业务语义文本、边框、填充、背景四组中性色构建界面层级底层由 var.scss 统一管理基准值并通过set-color-mix-level自动推导浅色阶与深色阶最终以--el-color-*系列 CSS 变量对外暴露。理解这套体系你就能在任何项目中准确地取色、覆盖与换肤保持与 Element Plus 视觉规范的高度一致。【免费下载链接】element-plus A Vue.js 3 UI Library made by Element team项目地址: https://gitcode.com/GitHub_Trending/el/element-plus创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Element Plus 色彩体系详解：主色、场景色与中性色的设计与使用
Element Plus 色彩体系详解主色、场景色与中性色的设计与使用【免费下载链接】element-plus A Vue.js 3 UI Library made by Element team项目地址: https://gitcode.com/GitHub_Trending/el/element-plusElement Plus 作为一套面向 Vue 3 的组件库通过一套精心设计的调色板palette为构建的产品提供统一、一致的视觉体验。本篇指南以 docs/en-US/component/color.md 为骨架深入剖析 Element Plus 的三大色彩类别——主色Main Color、场景色Secondary Color与中性色Neutral Color并结合 packages/theme-chalk/src/common/var.scss 等源码揭示其底层实现原理与 CSS 变量生成机制帮助你快速掌握颜色变量、理解深浅色阶的推导规则并在实际项目中正确使用与覆盖这些颜色。色彩体系总览Element Plus 使用一套特定的调色板来指定颜色以确保你构建的产品在外观与体验上保持一致。整套色彩体系划分为三个层次类别用途核心变量主色Main Color品牌色标识性最强的颜色--el-color-primary场景色Secondary Color表达不同语义场景如危险操作--el-color-success/--el-color-warning/--el-color-danger/--el-color-info中性色Neutral Color文本、背景与边框颜色体现层级结构--el-text-color-*/--el-border-color-*/--el-fill-color-*/--el-bg-color-*所有颜色都通过 CSS 变量CSS Vars暴露因此既可以在 SCSS 层通过变量映射进行主题定制也可以直接在运行时用 CSS 覆盖兼顾了编译期定制与运行时换肤两种场景。主色Main ColorElement Plus 的主色是明亮而友好的蓝色其基准值定义在 packages/theme-chalk/src/common/var.scss 中primary: ( base: #409eff, ),#409eff会被编译为 CSS 变量--el-color-primary并在几乎所有组件上承担选中、聚焦、激活、链接等核心交互语义。例如 var.scss 中多个组件的状态色都直接引用它Checkbox 选中态边框与背景色checked-input-border-color: getCssVar(color-primary)Radio 选中态checked-text-color: getCssVar(color-primary)Input 聚焦边框focus-border-color: getCssVar(color-primary)Button 的悬停文字色hover-text-color: getCssVar(color-primary)。主色的色阶体系仅有单一基准色无法支撑完整的视觉层次。Element Plus 通过将基准色与白色/黑色按比例混合派生出完整的浅色阶light与深色阶dark机制定义在 var.scss 的set-color-mix-levelmixin 中mixin set-color-mix-level( $type, $number, $mode: light, $mix-color: $color-white ) { $colors: map.deep-merge( ( $type: ( #{$mode}-#{$number}: roundColor( color.mix( $mix-color, map.get($colors, $type, base), math.percentage(math.div($number, 10)) ) ), ), ), $colors ) !global; }其核心逻辑为以 10% 为步长将白色按比例混入基准色生成light-1至light-9将黑色混入生成dark-2。以主色#409eff为例var.scss 源码注释 明确给出了各色阶的取值// 10% 53a8ff // 20% 66b1ff // 30% 79bbff // 40% 8cc5ff // 50% a0cfff // 60% b3d8ff // 70% c6e2ff // 80% d9ecff // 90% ecf5ff不过最终对外暴露的 CSS 变量并非全部 9 个浅色阶。在 packages/theme-chalk/src/mixins/_var.scss 的set-css-color-typemixin 中只会把以下变量写入编译产物mixin set-css-color-type($colors, $type) { include set-css-var-value((color, $type), map.get($colors, $type, base)); each $i in (3, 5, 7, 8, 9) { include set-css-var-value( (color, $type, light, $i), map.get($colors, $type, light-#{$i}) ); } include set-css-var-value( (color, $type, dark-2), map.get($colors, $type, dark-2) ); }也就是说每个类型最终会生成以下 CSS 变量--el-color-{type}基准色--el-color-{type}-light-3/light-5/light-7/light-8/light-9浅色阶--el-color-{type}-dark-2深色阶官方文档中的主色展示组件 main-color.vue 也印证了这一点它通过useCssVar(--el-color-primary)读取基准色并渲染dark-2与light-3/5/7/8/9共 6 个色阶条点击即可复制对应的primary-*变量名方便开发者直接取用。场景色Secondary Color除了主色不同业务场景需要使用不同的语义色来表达含义——例如危险色标识危险操作、成功色标识成功状态。Element Plus 提供了 4 个场景色类型基准值定义在 var.scss类型基准值语义success#67c23a成功状态warning#e6a23c警告状态danger#f56c6c危险操作如删除info#909399信息提示、次要辅助值得注意的是error与danger的基准值相同均为#f56c6c$types列表中也同时包含danger与error两个类型见 var.scss它们在浅色阶与深色阶的推导上共用同一色值但作为独立变量存在可以单独覆盖。场景色同样会通过set-css-color-type生成完整的浅色阶与深色阶变量如--el-color-success-light-9、--el-color-danger-dark-2。官方文档展示组件 secondary-colors.vue 遍历[success, warning, danger, info]四个类型每个类型渲染基准色块加dark-2/light-3/5/7/8/9色阶条点击可复制对应变量名。场景色的典型应用场景包括el-button typedanger、el-button typesuccess等按钮语义类型el-tag typewarning、el-tag typeinfo等标签类型Alert / Message / Notification 组件的状态图标与背景如 var.scss 中 Message 的背景色使用getCssVar(color, info, light-9)。中性色Neutral Color中性色用于文本、背景与边框通过不同的明度层级来表达界面中的层次结构。中性色不参与主色/场景色那样的语义表达而是承担可读性与结构划分。它由四组变量构成全部定义在 var.scss。文本色Text Color$text-color: ( primary: #303133, // 主文本一级信息 regular: #606266, // 常规文本二级信息 secondary: #909399, // 次要文本辅助信息 placeholder: #a8abb2, // 占位文本如输入框 placeholder disabled: #c0c4cc, // 禁用文本 );对应的 CSS 变量为--el-text-color-primary、--el-text-color-regular、--el-text-color-secondary、--el-text-color-placeholder、--el-text-color-disabled从深到浅构成文本的层级阶梯。边框色Border Color$border-color: ( : #dcdfe6, // 基础边框 light: #e4e7ed, lighter: #ebeef5, extra-light: #f2f6fc, dark: #d4d7de, darker: #cdd0d6, );对应的 CSS 变量为--el-border-color、--el-border-color-light、--el-border-color-lighter、--el-border-color-extra-light、--el-border-color-dark、--el-border-color-darker。填充色Fill Color$fill-color: ( : #f0f2f5, // 基础填充 light: #f5f7fa, lighter: #fafafa, extra-light: #fafcff, dark: #ebedf0, darker: #e6e8eb, blank: #ffffff, // 空白填充 );对应的 CSS 变量为--el-fill-color、--el-fill-color-light、--el-fill-color-lighter、--el-fill-color-extra-light、--el-fill-color-dark、--el-fill-color-darker、--el-fill-color-blank。填充色广泛用于下拉悬停背景如 var.scss 中 Select Option 的hover-background: getCssVar(fill-color, light)、输入框底色、禁用态背景等场景。背景色Background Color$bg-color: ( : #ffffff, // 基础背景 page: #f2f3f5, // 页面背景 overlay: #ffffff, // 浮层背景弹窗、下拉等 );对应的 CSS 变量为--el-bg-color、--el-bg-color-page、--el-bg-color-overlay。此外还有基础黑白变量--el-color-white: #ffffff与--el-color-black: #000000。官方文档的中性色展示组件 neutral-color.vue 完整呈现了上述四组颜色以及基础黑、白、透明色并标注了每个色块的变量值与名称点击可复制变量名是查阅中性色取值的直观工具。色阶的生成原理与 RGB 变量理解了基准色 混合推导的机制后还有一个值得注意的细节Element Plus 还会为每个颜色类型生成 RGB 通道变量。在 _var.scss 中mixin set-css-color-rgb($type) { $color: map.get($colors, $type, base); include set-css-var-value( (color, $type, rgb), #{color.channel($color, red, $space: rgb), color.channel($color, green, $space: rgb), color.channel($color, blue, $space: rgb)} ); }这会生成形如--el-color-primary-rgb: 64, 158, 255的变量。RGB 通道值与rgba()组合使用可以在不改变色相的前提下控制透明度例如实现半透明的遮罩、背景或 hover 效果这也是许多组件内部实现的关键基础。从源码结构还可以推断--el-color-{type}-light-1/2/4/6等中间色阶虽然在编译产物中未直接暴露为变量但它们在 SCSS 层的 map 中仍然存在组件样式在编译期可以直接引用从而避免无谓的 CSS 体积膨胀。自定义颜色覆盖与换肤实战掌握了颜色变量的命名与生成规律后就可以按需定制主题色。Element Plus 提供了两条主流路径详见 docs/en-US/guide/theming.md。方式一通过 SCSS 变量覆盖编译期定制theme-chalk使用 SCSS 编写所有颜色变量的源头都在 packages/theme-chalk/src/common/var.scss。在项目中使用forward覆盖$colorsmap 即可整体更换主色同时保留 light/dark 色阶的自动推导/* just override what you need */ forward element-plus/theme-chalk/src/common/var.scss with ( $colors: ( primary: ( base: green, ), ) ); // If you just import on demand, you can ignore the following content. // if you want to import all styles: // use element-plus/theme-chalk/src/index.scss as *;然后在入口文件中引入该样式文件注意要在 Element Plus 自身样式之前引入避免变量混合问题import { createApp } from vue import ./styles/element/index.scss import ElementPlus from element-plus import App from ./App.vue这里的关键在于自定义primary的base值后light-3/5/7/8/9与dark-2会基于新值重新混合生成全套组件按钮、输入框聚焦态、选中态等随之自动更新无需逐个覆盖。方式二通过 CSS 变量覆盖运行时换肤由于所有颜色最终以 CSS 变量形式暴露也可以直接在样式表中覆盖实现运行时的动态换肤与暗色模式:root { --el-color-primary: #626aef; --el-color-primary-light-3: #8a8bf2; --el-color-primary-dark-2: #4e55bf; }暗色模式的启用方式同样简洁在html上添加dark类并引入暗色变量文件即可详见 docs/en-US/guide/dark-mode.mdhtml classdark head/head body/body /html// if you just want to import css import element-plus/theme-chalk/dark/css-vars.css使用建议与最佳实践基于以上色彩体系的设计逻辑在实际项目中建议遵循以下几点优先使用语义变量而非硬编码色值文本、边框、填充尽量引用--el-text-color-*、--el-border-color-*、--el-fill-color-*系列变量这样在暗色模式或主题切换时能自动适配。场景色用于表达语义成功、警告、危险、信息操作分别使用对应类型变量需要更强视觉反馈时使用基准色需要弱化背景时使用light-9等浅色阶。透明效果使用 RGB 变量需要rgba()半透明场景时优先基于--el-color-{type}-rgb拼接而不是在 SCSS 中对已编译的十六进制色值做运算。色阶取用对照文档文档中的 main-color.vue、secondary-colors.vue、neutral-color.vue 三个展示组件提供了可视化色板与一键复制变量名的能力是开发时的便捷参考。总结Element Plus 的色彩体系是一个结构清晰、机制完备的设计系统主色#409eff定义品牌基调success / warning / danger / info 四个场景色表达业务语义文本、边框、填充、背景四组中性色构建界面层级底层由 var.scss 统一管理基准值并通过set-color-mix-level自动推导浅色阶与深色阶最终以--el-color-*系列 CSS 变量对外暴露。理解这套体系你就能在任何项目中准确地取色、覆盖与换肤保持与 Element Plus 视觉规范的高度一致。【免费下载链接】element-plus A Vue.js 3 UI Library made by Element team项目地址: https://gitcode.com/GitHub_Trending/el/element-plus创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考