wip: 重构多主题模块

src/components/Notify/NotifyList.vue

@@ -44,7 +44,7 @@ const props = defineProps<Props>()
     }
     .card-time {
       font-size: 12px;
-      color: grey;
+      color: var(--el-text-color-secondary);
     }
     .card-avatar {
       display: flex;

src/components/Notify/index.vue

@@ -85,8 +85,8 @@ const handleHistory = () => {
 <style lang="scss" scoped>
 .notify {
   margin-right: 10px;
-  color: var(--el-text-color-regular);
 }
+
 .notify-history {
   text-align: center;
   padding-top: 12px;

src/components/SearchMenu/SearchResult.vue

@@ -19,7 +19,7 @@ const itemStyle = (item: RouteRecordRaw) => {
   const flag = item.name === modelValue.value
   return {
     background: flag ? "var(--el-color-primary)" : "",
-    color: flag ? "#fff" : ""
+    color: flag ? "#ffffff" : ""
   }
 }
 

src/layouts/LeftMode.vue

@@ -57,8 +57,7 @@ $transition-time: 0.35s;
 }
 
 .drawer-bg {
-  background-color: #000;
+  background-color: rgba(0, 0, 0, 0.3);
-  opacity: 0.3;
   width: 100%;
   top: 0;
   height: 100%;
@@ -98,7 +97,9 @@ $transition-time: 0.35s;
 .layout-header {
   position: relative;
   z-index: 9;
-  box-shadow: var(--el-box-shadow-lighter);
+  background-color: var(--v3-header-bg-color);
+  box-shadow: var(--v3-header-box-shadow);
+  border-bottom: var(--v3-header-border-bottom);
 }
 
 .app-main {

src/layouts/LeftTopMode.vue

@@ -63,7 +63,8 @@ $transition-time: 0.35s;
 
 .layout-header {
   background-color: var(--v3-header-bg-color);
-  box-shadow: var(--el-box-shadow-lighter);
+  box-shadow: var(--v3-header-box-shadow);
+  border-bottom: var(--v3-header-border-bottom);
 }
 
 .main-container {

src/layouts/TopMode.vue

@@ -46,14 +46,14 @@ $transition-time: 0.35s;
     display: flex;
     .navigation-bar {
       flex: 1;
-      background: transparent;
     }
   }
 }
 
 .layout-header {
   background-color: var(--v3-header-bg-color);
-  box-shadow: var(--el-box-shadow-lighter);
+  box-shadow: var(--v3-header-box-shadow);
+  border-bottom: var(--v3-header-border-bottom);
 }
 
 .main-container {

src/layouts/components/Breadcrumb/index.vue

@@ -40,7 +40,7 @@ listenerRouteChange((route) => {
 </script>
 
 <template>
-  <el-breadcrumb class="app-breadcrumb">
+  <el-breadcrumb>
     <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
       <span v-if="item.redirect === 'noRedirect' || index === breadcrumbs.length - 1" class="no-redirect">
         {{ item.meta.title }}
@@ -53,19 +53,13 @@ listenerRouteChange((route) => {
 </template>
 
 <style lang="scss" scoped>
-.el-breadcrumb__inner,
+.el-breadcrumb {
-.el-breadcrumb__inner a {
-  font-weight: 400 !important;
-}
-
-.app-breadcrumb.el-breadcrumb {
-  display: inline-block;
-  font-size: 14px;
   line-height: var(--v3-navigationbar-height);
-  margin-left: 8px;
   .no-redirect {
-    color: #97a8be;
+    color: var(--el-text-color-placeholder);
-    cursor: text;
+  }
+  a {
+    font-weight: normal;
   }
 }
 </style>

src/layouts/components/Footer/index.vue

@@ -13,6 +13,6 @@ const VITE_APP_TITLE = import.meta.env.VITE_APP_TITLE
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #c0c4cc;
+  color: var(--el-text-color-placeholder);
 }
 </style>

src/layouts/components/Hamburger/index.vue

@@ -31,5 +31,6 @@ const toggleClick = () => {
 <style lang="scss" scoped>
 .icon {
   vertical-align: middle;
+  color: var(--v3-hamburger-text-color);
 }
 </style>

src/layouts/components/Logo/index.vue

@@ -34,7 +34,6 @@ const { isLeft, isTop } = useLayoutMode()
   width: 100%;
   height: var(--v3-header-height);
   line-height: var(--v3-header-height);
-  background-color: transparent;
   text-align: center;
   overflow: hidden;
   .layout-logo {

src/layouts/components/NavigationBar/index.vue

@@ -77,7 +77,7 @@ const logout = () => {
 .navigation-bar {
   height: var(--v3-navigationbar-height);
   overflow: hidden;
-  background: var(--v3-header-bg-color);
+  color: var(--v3-navigationbar-text-color);
   display: flex;
   justify-content: space-between;
   .hamburger {
@@ -114,7 +114,6 @@ const logout = () => {
     height: 100%;
     display: flex;
     align-items: center;
-    color: #606266;
     .right-menu-item {
       padding: 0 10px;
       cursor: pointer;

src/layouts/components/RightPanel/index.vue

@@ -37,7 +37,7 @@ const show = ref(false)
   z-index: 10;
   cursor: pointer;
   pointer-events: auto;
-  color: #fff;
+  color: #ffffff;
   display: flex;
   align-items: center;
   justify-content: center;

src/layouts/components/Settings/SelectLayoutMode.vue

@@ -50,7 +50,7 @@ const { isLeft, isTop, isLeftTop, setLayoutMode } = useLayoutMode()
   overflow: hidden;
   cursor: pointer;
   border-radius: 6px;
-  border: 2px solid #00000000;
+  border: 2px solid transparent;
   &:hover {
     border: 2px solid var(--el-color-primary);
   }
@@ -70,13 +70,13 @@ const { isLeft, isTop, isLeftTop, setLayoutMode } = useLayoutMode()
 
 .left {
   .el-header {
-    background-color: var(--el-border-color);
+    background-color: var(--el-fill-color-darker);
   }
   .el-aside {
     background-color: var(--el-color-primary);
   }
   .el-main {
-    background-color: var(--el-fill-color);
+    background-color: var(--el-fill-color-lighter);
   }
 }
 
@@ -85,19 +85,19 @@ const { isLeft, isTop, isLeftTop, setLayoutMode } = useLayoutMode()
     background-color: var(--el-color-primary);
   }
   .el-main {
-    background-color: var(--el-fill-color);
+    background-color: var(--el-fill-color-lighter);
   }
 }
 
 .left-top {
   .el-header {
-    background-color: var(--el-border-color);
+    background-color: var(--el-fill-color-darker);
   }
   .el-aside {
     background-color: var(--el-color-primary);
   }
   .el-main {
-    background-color: var(--el-fill-color);
+    background-color: var(--el-fill-color-lighter);
   }
 }
 </style>

src/layouts/components/TagsView/ScrollPane.vue

@@ -127,12 +127,13 @@ listenerRouteChange(() => {
   .arrow {
     width: 40px;
     height: 100%;
+    font-size: 18px;
     cursor: pointer;
     &.left {
-      box-shadow: 5px 0 5px -6px #ccc;
+      box-shadow: 5px 0 5px -6px var(--el-border-color-darker);
     }
     &.right {
-      box-shadow: -5px 0 5px -6px #ccc;
+      box-shadow: -5px 0 5px -6px var(--el-border-color-darker);
     }
   }
   .el-scrollbar {

src/layouts/components/TagsView/index.vue

@@ -194,8 +194,7 @@ onMounted(() => {
 .tags-view-container {
   height: var(--v3-tagsview-height);
   width: 100%;
-  background-color: var(--v3-header-bg-color);
+  color: var(--v3-tagsview-text-color);
-  box-shadow: 0 0 3px 0 #00000010;
   overflow: hidden;
   .tags-view-wrapper {
     .tags-view-item {
@@ -206,7 +205,6 @@ onMounted(() => {
       line-height: 26px;
       border: 1px solid var(--v3-tagsview-tag-border-color);
       border-radius: var(--v3-tagsview-tag-border-radius);
-      color: var(--v3-tagsview-tag-text-color);
       background-color: var(--v3-tagsview-tag-bg-color);
       padding: 0 8px;
       font-size: 12px;
@@ -222,16 +220,6 @@ onMounted(() => {
         background-color: var(--v3-tagsview-tag-active-bg-color);
         color: var(--v3-tagsview-tag-active-text-color);
         border-color: var(--v3-tagsview-tag-active-border-color);
-        &::before {
-          content: "";
-          background-color: var(--v3-tagsview-tag-active-before-color);
-          display: inline-block;
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-          position: relative;
-          margin-right: 2px;
-        }
       }
       .el-icon {
         margin: 0 2px;
@@ -246,22 +234,22 @@ onMounted(() => {
   }
   .contextmenu {
     margin: 0;
-    background-color: #fff;
     z-index: 3000;
     position: absolute;
     list-style-type: none;
     padding: 5px 0;
     border-radius: 4px;
     font-size: 12px;
-    font-weight: 400;
+    color: var(--v3-tagsview-contextmenu-text-color);
-    color: #333;
+    background-color: var(--v3-tagsview-contextmenu-bg-color);
-    box-shadow: 2px 2px 3px 0 #00000030;
+    box-shadow: var(--v3-tagsview-contextmenu-box-shadow);
     li {
       margin: 0;
       padding: 7px 16px;
       cursor: pointer;
       &:hover {
-        background-color: #eee;
+        color: var(--v3-tagsview-contextmenu-hover-text-color);
+        background-color: var(--v3-tagsview-contextmenu-hover-bg-color);
       }
     }
   }

src/styles/element-plus.scss

@@ -1,15 +1,8 @@
 /** 自定义 Element Plus 样式 */
 
-// 表格
+// 卡片
-.el-table {
+.el-card {
-  // 表头
+  background-color: var(--el-bg-color);
-  th.el-table__cell {
-    background-color: var(--el-fill-color-light) !important;
-  }
-  // 行元素
-  tr {
-    background-color: var(--el-bg-color-overlay);
-  }
 }
 
 // 分页

src/styles/index.scss

@@ -24,6 +24,7 @@ html {
 
 body {
   height: 100%;
+  color: var(--v3-body-text-color);
   background-color: var(--v3-body-bg-color);
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;

src/styles/theme/core/layouts.scss

@@ -1,17 +1,5 @@
 /** Layout 相关 */
 
-body {
-  background-color: $theme-bg-color;
-}
-
-#app {
-  color: $font-color;
-  // 右侧设置面板
-  .handle-button {
-    background-color: lighten($theme-bg-color, 20%) !important;
-  }
-}
-
 .app-wrapper {
   // 侧边栏
   .sidebar-container {
@@ -38,44 +26,9 @@ body {
       }
     }
   }
-
-  // Header
-  .layout-header {
-    background-color: $theme-bg-color;
-    border-bottom: 1px solid lighten($theme-bg-color, 10%) !important;
 }
 
-  // 顶部导航栏
+// 右侧设置面板
-  .navigation-bar {
+.handle-button {
-    background-color: $theme-bg-color;
+  background-color: lighten($theme-bg-color, 20%) !important;
-    .right-menu {
-      .svg-icon {
-        color: $font-color;
-      }
-    }
-  }
-
-  // TagsView
-  .tags-view-container {
-    background-color: $theme-bg-color !important;
-    .tags-view-item {
-      background-color: $theme-bg-color !important;
-      color: $font-color !important;
-      border: 1px solid $border-color !important;
-      &.active {
-        background-color: $theme-color !important;
-        color: $active-font-color !important;
-        border-color: $border-color !important;
-      }
-    }
-    // 右键菜单
-    .contextmenu {
-      background-color: lighten($theme-bg-color, 8%);
-      color: $font-color;
-      li:hover {
-        background-color: lighten($theme-bg-color, 16%);
-        color: $active-font-color;
-      }
-    }
-  }
 }

src/styles/theme/dark-blue/element-plus.css

@@ -6,33 +6,40 @@
 
 html.dark-blue {
   /** color */
-  --el-color-primary: #01efb7bb;
+  --el-color-primary: #00bb99;
-  --el-color-primary-light-3: rgba(1, 147, 127, 0.8133333333);
+  --el-color-primary-light-3: #00bb99a2;
-  --el-color-primary-light-5: rgba(2, 102, 99, 0.8666666667);
+  --el-color-primary-light-7: #00bb9948;
-  --el-color-primary-light-7: rgba(2, 65, 77, 0.92);
+  --el-color-primary-light-8: #00bb9932;
-  --el-color-primary-light-8: rgba(2, 49, 68, 0.9466666667);
+  --el-color-primary-light-9: #00bb9916;
-  --el-color-primary-light-9: rgba(2, 35, 59, 0.9733333333);
+  --el-color-primary-dark-2: #00bb99;
-  --el-color-primary-dark-2: rgba(1, 167, 128, 0.7866666667);
-  --el-color-success: #01efb7bb;
   /** text-color */
-  --el-text-color-primary: rgba(255, 255, 255, 0.8);
+  --el-text-color-primary: #e5eaf3;
-  --el-text-color-regular: rgba(255, 255, 255, 0.8);
+  --el-text-color-regular: #cfd3dc;
-  --el-text-color-secondary: rgba(255, 255, 255, 0.8);
+  --el-text-color-secondary: #a3a6ad;
-  --el-text-color-placeholder: rgba(255, 255, 255, 0.8);
+  --el-text-color-placeholder: #8d9095;
-  --el-text-color-disabled: rgba(255, 255, 255, 0.3);
+  --el-text-color-disabled: #6c6e72;
   /** border-color */
-  --el-border-color: #01efb755;
+  --el-border-color-darker: #003380;
-  --el-border-color-light: #01efb755;
+  --el-border-color-dark: #003380;
-  --el-border-color-lighter: #01efb755;
+  --el-border-color: #003380;
+  --el-border-color-light: #003380;
+  --el-border-color-lighter: #003380;
+  --el-border-color-extra-light: #003380;
   /** fill-color */
-  --el-fill-color: #032659;
+  --el-fill-color-darker: #042d6b;
+  --el-fill-color-dark: #042d6b;
+  --el-fill-color: #042d6b;
   --el-fill-color-light: #032659;
+  --el-fill-color-lighter: #032659;
   --el-fill-color-blank: #031e47;
+  --el-fill-color-extra-light: #031e47;
   /** bg-color */
-  --el-bg-color: #021633;
+  --el-bg-color-page: #001535;
-  --el-bg-color-overlay: #031e47;
+  --el-bg-color: #031e47;
+  --el-bg-color-overlay: #032659;
   /** mask */
   --el-mask-color: rgba(0, 0, 0, 0.5);
+  --el-mask-color-extra-light: rgba(0, 0, 0, 0.3);
 }
 
 /** button */

src/styles/theme/dark-blue/element-plus.scss

@@ -1,127 +0,0 @@
-/**
- * dark-blue 主题下的 Element Plus SCSS 变量
- * 在此查阅所有可自定义的变量：https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss
- */
-
-@use "sass:map";
-@use "sass:math";
-@use "element-plus/theme-chalk/src/mixins/function.scss" as *;
-@use "element-plus/theme-chalk/src/mixins/_var.scss" as *;
-@use "element-plus/theme-chalk/src/mixins/mixins.scss" as *;
-@use "./variables.scss" as *;
-
-// 生成指定颜色的明亮/黑暗颜色
-@mixin set-color-mix-level($type, $number, $mode: "light", $mix-color: $color-white) {
-  $colors: map.deep-merge(
-    (
-      $type: (
-        "#{$mode}-#{$number}": mix($mix-color, map.get($colors, $type, "base"), math.percentage(math.div($number, 10)))
-      )
-    ),
-    $colors
-  ) !global;
-}
-
-$types: primary, success, warning, danger, error, info;
-
-$color: $theme-color;
-$success: #01efb7bb;
-
-$colors: () !default;
-$colors: map.deep-merge(
-  (
-    "white": #ffffff,
-    "primary": (
-      "base": $color
-    ),
-    "success": (
-      "base": $success
-    )
-  ),
-  $colors
-);
-
-// text
-$text-color-base: #fff;
-$text-color: () !default;
-$text-color: map.merge(
-  (
-    "primary": rgba($text-color-base, 0.8),
-    "regular": rgba($text-color-base, 0.8),
-    "secondary": rgba($text-color-base, 0.8),
-    "placeholder": rgba($text-color-base, 0.8),
-    "disabled": rgba($text-color-base, 0.3)
-  ),
-  $text-color
-);
-
-// 生成 --el-color-${type}-light-i
-@each $type in (primary) {
-  @for $i from 1 through 9 {
-    @include set-color-mix-level($type, $i, "light", #021633);
-  }
-  // --el-color-${type}-dark-2
-  @include set-color-mix-level($type, 2, "dark", #000);
-}
-
-// border
-$border: () !default;
-$border: map.merge(
-  (
-    "": #01efb755,
-    "light": #01efb755,
-    "lighter": #01efb755
-  ),
-  $border
-);
-
-// fill
-$fill-color: () !default;
-$fill-color: map.merge(
-  (
-    "": #032659,
-    "light": #032659,
-    "blank": #031e47
-  ),
-  $fill-color
-);
-
-// background
-$bg-color: () !default;
-$bg-color: map.merge(
-  (
-    "": #021633,
-    "overlay": #031e47
-  ),
-  $bg-color
-);
-
-// mask
-$mask-color: () !default;
-$mask-color: map.merge(
-  (
-    "": rgba(0, 0, 0, 0.5)
-  ),
-  $mask-color
-);
-
-// button
-$button: () !default;
-$button: map.merge(
-  (
-    "disabled-text-color": rgba(255, 255, 255, 0.5)
-  ),
-  $button
-);
-
-html.dark-blue {
-  @include set-css-color-type($colors, "primary");
-  @include set-component-css-var("text-color", $text-color);
-  @include set-component-css-var("border-color", $border);
-  @include set-component-css-var("fill-color", $fill-color);
-  @include set-component-css-var("bg-color", $bg-color);
-  @include set-component-css-var("mask-color", $mask-color);
-  @include b(button) {
-    @include set-component-css-var("button", $button);
-  }
-}

src/styles/theme/dark-blue/index.scss

@@ -1,4 +1,3 @@
-@use "./element-plus.css"; // 方案一
+@use "./element-plus.css";
-// @use "./element-plus.scss"; // 方案二
 @import "./variables.scss";
 @import "../core/index.scss";

src/styles/theme/dark-blue/variables.scss

@@ -3,14 +3,12 @@
 // 主题名称
 $theme-name: "dark-blue";
 // 主题背景颜色
-$theme-bg-color: #021633;
+$theme-bg-color: #031e47;
 // 主题色
-$theme-color: #01efb7bb;
+$theme-color: #00bb99;
 // 默认文字颜色
-$font-color: rgba(255, 255, 255, 0.8);
+$font-color: #cfd3dc;
 // active 状态下文字颜色
-$active-font-color: #fff;
+$active-font-color: #ffffff;
-// hover 状态下文字颜色
-$hover-color: #fff;
 // 边框颜色
-$border-color: #01efb755;
+$border-color: #003380;

src/styles/theme/dark/variables.scss

@@ -3,14 +3,12 @@
 // 主题名称
 $theme-name: "dark";
 // 主题背景颜色
-$theme-bg-color: #151515;
+$theme-bg-color: #141414;
 // 主题色
 $theme-color: #409eff;
 // 默认文字颜色
-$font-color: #c0c4cc;
+$font-color: #cfd3dc;
 // active 状态下文字颜色
-$active-font-color: #fff;
+$active-font-color: #ffffff;
-// hover 状态下文字颜色
-$hover-color: #fff;
 // 边框颜色
-$border-color: #303133;
+$border-color: #4c4d4f;

src/styles/variables.css

@@ -1,12 +1,16 @@
 /** 全局 CSS 变量，这种变量不仅可以在 CSS 和 SCSS 中使用，还可以导入到 JS 中使用 */
 :root {
-  /** 全局背景色 */
+  /** Body */
-  --v3-body-bg-color: #f2f3f5;
+  --v3-body-text-color: var(--el-text-color-primary);
+  --v3-body-bg-color: var(--el-bg-color-page);
   /** Header 区域 = NavigationBar 组件 + TagsView 组件 */
   --v3-header-height: calc(var(--v3-navigationbar-height) + var(--v3-tagsview-height));
-  --v3-header-bg-color: #ffffff;
+  --v3-header-bg-color: var(--el-bg-color);
+  --v3-header-box-shadow: var(--el-box-shadow-lighter);
+  --v3-header-border-bottom: 1px solid var(--el-fill-color);
   /** NavigationBar 组件 */
   --v3-navigationbar-height: 50px;
+  --v3-navigationbar-text-color: var(--el-text-color-regular);
   /** Sidebar 组件（左侧模式全部生效、顶部模式全部不生效、混合模式非颜色部分生效） */
   --v3-sidebar-width: 220px;
   --v3-sidebar-hide-width: 58px;
@@ -14,20 +18,26 @@
   --v3-sidebar-menu-tip-line-bg-color: var(--el-color-primary);
   --v3-sidebar-menu-bg-color: #001428;
   --v3-sidebar-menu-hover-bg-color: #409eff10;
-  --v3-sidebar-menu-text-color: #c0c4cc;
+  --v3-sidebar-menu-text-color: #cfd3dc;
   --v3-sidebar-menu-active-text-color: #ffffff;
   /** TagsView 组件 */
   --v3-tagsview-height: 34px;
-  --v3-tagsview-tag-text-color: #495060;
+  --v3-tagsview-text-color: var(--el-text-color-regular);
   --v3-tagsview-tag-active-text-color: #ffffff;
-  --v3-tagsview-tag-bg-color: #ffffff;
+  --v3-tagsview-tag-bg-color: var(--el-bg-color);
   --v3-tagsview-tag-active-bg-color: var(--el-color-primary);
   --v3-tagsview-tag-border-radius: 2px;
-  --v3-tagsview-tag-border-color: #d8dce5;
+  --v3-tagsview-tag-border-color: var(--el-border-color-lighter);
   --v3-tagsview-tag-active-border-color: var(--el-color-primary);
-  --v3-tagsview-tag-active-before-color: #ffffff;
   --v3-tagsview-tag-icon-hover-bg-color: #00000030;
   --v3-tagsview-tag-icon-hover-color: #ffffff;
+  --v3-tagsview-contextmenu-text-color: var(--el-text-color-regular);
+  --v3-tagsview-contextmenu-hover-text-color: var(--el-text-color-primary);
+  --v3-tagsview-contextmenu-bg-color: var(--el-bg-color-overlay);
+  --v3-tagsview-contextmenu-hover-bg-color: var(--el-fill-color);
+  --v3-tagsview-contextmenu-box-shadow: var(--el-box-shadow);
+  /** Hamburger 组件 */
+  --v3-hamburger-text-color: var(--el-text-color-primary);
   /** RightPanel 组件  */
   --v3-rightpanel-button-bg-color: #001428;
 }

src/views/login/index.vue

@@ -157,7 +157,7 @@ createCode()
     max-width: 90%;
     border-radius: 20px;
     box-shadow: 0 0 10px #dcdfe6;
-    background-color: var(--el-bg-color-overlay);
+    background-color: var(--el-bg-color);
     overflow: hidden;
     .title {
       display: flex;

src/views/permission/directive.vue

@@ -49,6 +49,7 @@ import SwitchRoles from "./components/SwitchRoles.vue"
 .margin-top-15 {
   margin-top: 15px;
 }
+
 .margin-top-30 {
   margin-top: 30px;
 }

src/views/table/vxe-table/index.vue

@@ -317,7 +317,7 @@ const crudStore = reactive({
   },
   /** 删除 */
   onDelete: (row: RowMeta) => {
-    const tip = `确定 <strong style="color: red"> 删除 </strong> 用户 <strong style="color: #409eff"> ${row.username} </strong> ？`
+    const tip = `确定 <strong style="color: var(--el-color-danger);"> 删除 </strong> 用户 <strong style="color: var(--el-color-primary);"> ${row.username} </strong> ？`
     const config: ElMessageBoxOptions = {
       type: "warning",
       showClose: true,