feat: 主题模式全面采用 css var

src/layouts/LeftMode.vue

@@ -66,6 +66,10 @@ $transition-time: 0.35s;
 }
 
 .sidebar-container {
+  --el-menu-bg-color: var(--v3-sidebar-menu-bg-color);
+  --el-menu-hover-bg-color: var(--v3-sidebar-menu-hover-bg-color);
+  --el-menu-text-color: var(--v3-sidebar-menu-text-color);
+  --el-menu-active-color: var(--v3-sidebar-menu-active-text-color);
   background-color: var(--v3-sidebar-menu-bg-color);
   transition: width $transition-time;
   width: var(--v3-sidebar-width) !important;

src/layouts/components/NavigationBar/index.vue

@@ -98,16 +98,6 @@ const logout = () => {
     flex: 1;
     // 设置 min-width 是为了让 Sidebar 里的 el-menu 宽度自适应
     min-width: 0px;
-    :deep(.el-menu) {
-      background-color: transparent;
-    }
-    :deep(.el-sub-menu) {
-      &.is-active {
-        .el-sub-menu__title {
-          color: var(--el-color-primary) !important;
-        }
-      }
-    }
   }
   .right-menu {
     margin-right: 10px;

src/layouts/components/Sidebar/index.vue

@@ -8,11 +8,11 @@ import SidebarItem from "./SidebarItem.vue"
 import Logo from "../Logo/index.vue"
 import { useDevice } from "@/hooks/useDevice"
 import { useLayoutMode } from "@/hooks/useLayoutMode"
-import { getCssVariableValue } from "@/utils"
+// import { getCssVariableValue } from "@/utils"
 
-const v3SidebarMenuBgColor = getCssVariableValue("--v3-sidebar-menu-bg-color")
-const v3SidebarMenuTextColor = getCssVariableValue("--v3-sidebar-menu-text-color")
-const v3SidebarMenuActiveTextColor = getCssVariableValue("--v3-sidebar-menu-active-text-color")
+// const v3SidebarMenuBgColor = getCssVariableValue("--v3-sidebar-menu-bg-color")
+// const v3SidebarMenuTextColor = getCssVariableValue("--v3-sidebar-menu-text-color")
+// const v3SidebarMenuActiveTextColor = getCssVariableValue("--v3-sidebar-menu-active-text-color")
 
 const { isMobile } = useDevice()
 const { isLeft, isTop } = useLayoutMode()
@@ -31,15 +31,15 @@ const activeMenu = computed(() => {
 const noHiddenRoutes = computed(() => permissionStore.routes.filter((item) => !item.meta?.hidden))
 const isCollapse = computed(() => !appStore.sidebar.opened)
 const isLogo = computed(() => isLeft.value && settingsStore.showLogo)
-const backgroundColor = computed(() => (isLeft.value ? v3SidebarMenuBgColor : undefined))
-const textColor = computed(() => (isLeft.value ? v3SidebarMenuTextColor : undefined))
-const activeTextColor = computed(() => (isLeft.value ? v3SidebarMenuActiveTextColor : undefined))
+// const backgroundColor = computed(() => (isLeft.value ? v3SidebarMenuBgColor : undefined))
+// const textColor = computed(() => (isLeft.value ? v3SidebarMenuTextColor : undefined))
+// const activeTextColor = computed(() => (isLeft.value ? v3SidebarMenuActiveTextColor : undefined))
 const sidebarMenuItemHeight = computed(() => {
   return !isTop.value ? "var(--v3-sidebar-menu-item-height)" : "var(--v3-navigationbar-height)"
 })
-const sidebarMenuHoverBgColor = computed(() => {
-  return !isTop.value ? "var(--v3-sidebar-menu-hover-bg-color)" : "transparent"
-})
+// const sidebarMenuHoverBgColor = computed(() => {
+//   return !isTop.value ? "var(--v3-sidebar-menu-hover-bg-color)" : "transparent"
+// })
 const tipLineWidth = computed(() => {
   return !isTop.value ? "2px" : "0px"
 })
@@ -56,19 +56,26 @@ const hiddenScrollbarVerticalBar = computed(() => {
       <el-menu
         :default-active="activeMenu"
         :collapse="isCollapse && !isTop"
-        :background-color="backgroundColor"
-        :text-color="textColor"
-        :active-text-color="activeTextColor"
         :unique-opened="true"
         :collapse-transition="false"
         :mode="isTop && !isMobile ? 'horizontal' : 'vertical'"
+        popper-class="xxx"
       >
         <SidebarItem v-for="route in noHiddenRoutes" :key="route.path" :item="route" :base-path="route.path" />
       </el-menu>
     </el-scrollbar>
   </div>
 </template>
 
+<style lang="scss">
+.xxx {
+  --el-menu-bg-color: var(--v3-sidebar-menu-bg-color);
+  --el-menu-hover-bg-color: var(--v3-sidebar-menu-hover-bg-color);
+  --el-menu-text-color: var(--v3-sidebar-menu-text-color);
+  --el-menu-active-color: var(--v3-sidebar-menu-active-text-color);
+}
+</style>
+
 <style lang="scss" scoped>
 %tip-line {
   &::before {
@@ -130,14 +137,15 @@ const hiddenScrollbarVerticalBar = computed(() => {
   line-height: v-bind(sidebarMenuItemHeight);
   &.is-active,
   &:hover {
-    background-color: v-bind(sidebarMenuHoverBgColor);
+    // background-color: v-bind(sidebarMenuHoverBgColor);
+    // background-color: var(--v3-sidebar-menu-hover-bg-color);
   }
 }
 
 :deep(.el-sub-menu) {
   &.is-active {
     > .el-sub-menu__title {
-      color: v-bind(activeTextColor) !important;
+      // color: v-bind(activeTextColor) !important;
     }
   }
 }

src/styles/element-plus.css

@@ -1,7 +1,8 @@
 /**
- * dark-blue 主题模式下的 Element Plus CSS 变量
+ * 自定义 Element Plus CSS 变量
  * 在此查阅所有可自定义的变量：https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss
  * 也可以打开浏览器控制台选择元素，查看要覆盖的变量名
+ * 由于 Element Plus 自带默认主题模式和 dark 主题模式，所以这里只新增 dark-blue 主题模式下的变量，但你也可以根据需求自行在这里定义每个模式的变量~
  */
 
 /** 基础颜色 */

src/styles/index.scss

@@ -1,4 +1,4 @@
-// 全局 CSS 变量
+// 项目 CSS 变量
 @import "./variables.css";
 // Transition
 @import "./transition.scss";
@@ -9,7 +9,7 @@
 @import "./vxe-table.css";
 @import "./vxe-table.scss";
 // 注册多主题
-@import "./theme/register.scss";
+// @import "./theme/register.scss";
 // Mixins
 @import "./mixins.scss";
 // View Transition

src/styles/variables.css

@@ -1,4 +1,4 @@
-/** 全局 CSS 变量，这种变量不仅可以在 CSS 和 SCSS 中使用，还可以导入到 JS 中使用 */
+/** 项目 CSS 变量，这种变量不仅可以在 CSS 和 SCSS 中使用，还可以导入到 JS 中使用 */
 
 :root {
   /** Body */
@@ -47,6 +47,22 @@
   --v3-rightpanel-button-bg-color: #001428;
 }
 
+/** dark 主题模式 */
+html.dark {
+  --v3-sidebar-menu-bg-color: var(--el-bg-color);
+  --v3-sidebar-menu-hover-bg-color: var(--el-bg-color-overlay);
+  --v3-sidebar-menu-text-color: #cfd3dc;
+  --v3-sidebar-menu-active-text-color: #ffffff;
+}
+
+/** dark-blue 主题模式 */
+html.dark-blue {
+  --v3-sidebar-menu-bg-color: var(--el-bg-color);
+  --v3-sidebar-menu-hover-bg-color: var(--el-bg-color-overlay);
+  --v3-sidebar-menu-text-color: #cfd3dc;
+  --v3-sidebar-menu-active-text-color: #ffffff;
+}
+
 /** 内容区放大时，将不需要的组件隐藏 */
 body.content-large {
   /** Header 区域 = TagsView 组件 */

src/styles/vxe-table.css

@@ -1,6 +1,6 @@
 /**
- * 所有主题模式下的 Vxe Table CSS 变量
- * 用 Element Plus 的 CSS 变量来覆写 Vxe Table 的 CSS 变量，目的是使 Vxe Table 支持多主题模式且样式统一
+ * 自定义 Vxe Table CSS 变量
+ * 用 Element Plus CSS 变量来覆写 Vxe Table CSS 变量，目的是让 Vxe Table 在不同主题模式下都跟随 Element Plus 的颜色
  * 在此查阅所有可自定义的变量：https://github.com/x-extends/vxe-table/blob/master/styles/css-variable.scss
  */