|
|
@@ -1,10 +1,22 @@
|
|
|
// ========== 亮色模式(默认) ==========
|
|
|
:root {
|
|
|
// 覆盖 Element Plus 主色
|
|
|
+ // ---- 主色 ----
|
|
|
--el-color-primary: #8077ff;
|
|
|
- --el-color-primary-light-3: #79bbff;
|
|
|
- --el-color-primary-light-5: #a0cfff;
|
|
|
- --el-color-primary-dark-2: #337ecc;
|
|
|
+
|
|
|
+ // ---- 亮色 light 梯度(与白色混合) ----
|
|
|
+ --el-color-primary-light-1: #8d85ff; // 10%
|
|
|
+ --el-color-primary-light-2: #9992ff; // 20%
|
|
|
+ --el-color-primary-light-3: #a6a0ff; // 30% ← hover 边框
|
|
|
+ --el-color-primary-light-4: #b3adff; // 40%
|
|
|
+ --el-color-primary-light-5: #c0bbff; // 50% ← 禁用背景
|
|
|
+ --el-color-primary-light-6: #ccc9ff; // 60%
|
|
|
+ --el-color-primary-light-7: #d9d6ff; // 70% ← input hover 边框
|
|
|
+ --el-color-primary-light-8: #e6e4ff; // 80% ← hover 背景
|
|
|
+ --el-color-primary-light-9: #f2f1ff; // 90% ← 极浅背景
|
|
|
+
|
|
|
+ // ---- 暗色(按下/激活:与黑色混合 20%) ----
|
|
|
+ --el-color-primary-dark-2: #665fcc;
|
|
|
|
|
|
// 自定义渐变按钮变量
|
|
|
--btn-primary-gradient: linear-gradient(91deg, #5f53ff -40.99%, #8d53ff 88.34%);
|
|
|
@@ -24,9 +36,20 @@
|
|
|
// ========== 暗色模式 ==========
|
|
|
html.dark {
|
|
|
// 覆盖 Element Plus 暗色下的主色(可选调整)
|
|
|
+ // ---- 主色保持不变 ----
|
|
|
--el-color-primary: #8077ff;
|
|
|
- --el-color-primary-light-3: #3375b9;
|
|
|
- --el-color-primary-light-5: #2a598a;
|
|
|
+ // ---- 暗色 light 梯度(与 #141414 混合) ----
|
|
|
+ --el-color-primary-light-1: #756de8; // 10%
|
|
|
+ --el-color-primary-light-2: #6a63d0; // 20%
|
|
|
+ --el-color-primary-light-3: #6059b9; // 30% ← 暗色边框
|
|
|
+ --el-color-primary-light-4: #554fa1; // 40%
|
|
|
+ --el-color-primary-light-5: #4a468a; // 50% ← 暗色禁用
|
|
|
+ --el-color-primary-light-6: #3f3c72; // 60%
|
|
|
+ --el-color-primary-light-7: #34325b; // 70% ← 暗色 hover 背景
|
|
|
+ --el-color-primary-light-8: #2a2843; // 80% ← 暗色浅背景
|
|
|
+ --el-color-primary-light-9: #1f1e2c; // 90% ← 暗色极浅背景
|
|
|
+ // ---- 暗色下 hover 变亮(与白色混合 20%) ----
|
|
|
+ --el-color-primary-dark-2: #9992ff;
|
|
|
--el-color-primary-dark: rgba(255, 255, 255, 0.08);
|
|
|
|
|
|
// 暗色下的渐变按钮
|