Browse Source

ele ui主题色设置

dengshaobo 1 month ago
parent
commit
11bf604f2e
1 changed files with 31 additions and 0 deletions
  1. 31 0
      src/styles/element.scss

+ 31 - 0
src/styles/element.scss

@@ -1,4 +1,35 @@
 //饿了么基础样式覆盖
+
+// ============================================================
+// Element Plus 主题色覆盖
+// ------------------------------------------------------------
+// 将 Element Plus 默认主色 #409eff 统一替换为项目品牌蓝 #2e64fa,
+// 覆盖主色及其全部派生色(light-3/5/7/8/9、dark-2),
+// 使按钮 hover / active / disabled、loading 文字与 spinner、
+// 单选 / 复选选中等所有依赖主色的场景保持一致。
+//
+// 派生色规则与 Element Plus 官方一致:
+//   light-i = mix(白, 主色, i * 10%)
+//   dark-2  = mix(黑, 主色, 20%)
+// 用 SCSS mix() 自动计算,后续改品牌色只需改 var.scss 的 $blue。
+//
+// 引入位置:main.js 中 'element-plus/dist/index.css' 之后,
+// 同为 :root 特异性,靠后引入即可覆盖默认值。
+// ============================================================
+
+@use 'sass:color';
+
+
+:root {
+    --el-color-primary: #2E64FA;
+    --el-color-primary-light-3: #{color.mix(#ffffff, #2E64FA, 30%)};
+    --el-color-primary-light-5: #{color.mix(#ffffff, #2E64FA, 50%)};
+    --el-color-primary-light-7: #{color.mix(#ffffff, #2E64FA, 70%)};
+    --el-color-primary-light-8: #{color.mix(#ffffff,#2E64FA, 80%)};
+    --el-color-primary-light-9: #{color.mix(#ffffff, #2E64FA, 90%)};
+    --el-color-primary-dark-2: #{color.mix(#000000, #2E64FA, 20%)};
+}
+
 //默认高度36px
 .el-select .el-select__wrapper,
 .el-input .el-input__wrapper,