|
|
@@ -0,0 +1,57 @@
|
|
|
+// ========== 亮色模式（默认） ==========
|
|
|
+:root {
|
|
|
+ // 覆盖 Element Plus 主色
|
|
|
+ --el-color-primary: #409eff;
|
|
|
+ --el-color-primary-light-3: #79bbff;
|
|
|
+ --el-color-primary-light-5: #a0cfff;
|
|
|
+ --el-color-primary-dark-2: #337ecc;
|
|
|
+
|
|
|
+ // 自定义渐变按钮变量
|
|
|
+ --btn-primary-gradient: linear-gradient(91deg, #5f53ff -40.99%, #8d53ff 88.34%);
|
|
|
+ --btn-primary-gradient-hover: linear-gradient(95deg, #8d22ff -9.99%, #ae00ff 91.44%);
|
|
|
+ --btn-primary-shadow: rgba(102, 126, 234, 0.4);
|
|
|
+
|
|
|
+ // 页面级自定义变量
|
|
|
+ --admin-bg: #f0f2f5;
|
|
|
+ --admin-sidebar-bg: #ffffff;
|
|
|
+ --admin-header-bg: #ffffff;
|
|
|
+ --admin-card-bg: #ffffff;
|
|
|
+ --admin-text-primary: #303133;
|
|
|
+ --admin-text-secondary: #909399;
|
|
|
+ --admin-border-color: #e4e7ed;
|
|
|
+}
|
|
|
+
|
|
|
+// ========== 暗色模式 ==========
|
|
|
+html.dark {
|
|
|
+ // 覆盖 Element Plus 暗色下的主色（可选调整）
|
|
|
+ --el-color-primary: #409eff;
|
|
|
+ --el-color-primary-light-3: #3375b9;
|
|
|
+ --el-color-primary-light-5: #2a598a;
|
|
|
+ --el-color-primary-dark-2: #66b1ff;
|
|
|
+
|
|
|
+ // 暗色下的渐变按钮
|
|
|
+ --btn-primary-gradient: linear-gradient(135deg, #5a6fe0 0%, #6a3f9a 100%);
|
|
|
+ --btn-primary-gradient-hover: linear-gradient(135deg, #6a3f9a 0%, #5a6fe0 100%);
|
|
|
+ --btn-primary-shadow: rgba(90, 111, 224, 0.3);
|
|
|
+
|
|
|
+ // 页面级自定义变量
|
|
|
+ --admin-bg: #0a0a0a;
|
|
|
+ --admin-sidebar-bg: #141414;
|
|
|
+ --admin-header-bg: #1d1e1f;
|
|
|
+ --admin-card-bg: #1d1e1f;
|
|
|
+ --admin-text-primary: #e5eaf3;
|
|
|
+ --admin-text-secondary: #a3a6ad;
|
|
|
+ --admin-border-color: #414243;
|
|
|
+}
|
|
|
+
|
|
|
+// 全局平滑过渡（主题切换时）
|
|
|
+html.theme-transition,
|
|
|
+html.theme-transition *,
|
|
|
+html.theme-transition *::before,
|
|
|
+html.theme-transition *::after {
|
|
|
+ transition:
|
|
|
+ background-color 0.3s ease,
|
|
|
+ color 0.3s ease,
|
|
|
+ border-color 0.3s ease,
|
|
|
+ box-shadow 0.3s ease !important;
|
|
|
+}
|
piks