优化主题色配置

src/layout/components/Navbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="navbar">
+  <div class="navbar" :data-theme="sideTheme">
     <hamburger id="hamburger-container" :is-active="getters.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
     <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!$store.state.settings.topNav" />
     <top-nav id="topmenu-container" class="topmenu-container" v-if="$store.state.settings.topNav" />
@@ -52,7 +52,7 @@ import Notice from '@/components/Notice/Index'
 
 const store = useStore()
 const getters = computed(() => store.getters)
-
+const sideTheme = computed(() => store.state.settings.sideTheme)
 function toggleSideBar() {
   store.dispatch('app/toggleSideBar')
 }

src/layout/components/Sidebar/Logo.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="sidebar-logo-container" :class="{ 'collapse': collapse }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+  <div class="sidebar-logo-container" :class="{ collapse: collapse }">
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1>
+        <h1 v-else class="sidebar-title">{{ title }}</h1>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1>
+        <h1 class="sidebar-title">{{ title }}</h1>
       </router-link>
     </transition>
   </div>
@@ -20,13 +20,13 @@ import logo from '@/assets/logo/logo.png'
 defineProps({
   collapse: {
     type: Boolean,
-    required: true
-  }
+    required: true,
+  },
 })
 
-const title = ref(import.meta.env.VITE_APP_TITLE);
-const store = useStore();
-const sideTheme = computed(() => store.state.settings.sideTheme);
+const title = ref(import.meta.env.VITE_APP_TITLE)
+const store = useStore()
+const sideTheme = computed(() => store.state.settings.sideTheme)
 </script>
 
 <style lang="scss" scoped>
@@ -44,7 +44,7 @@ const sideTheme = computed(() => store.state.settings.sideTheme);
   width: 100%;
   height: 50px;
   line-height: 50px;
-  background: #2b2f3a;
+  background: var(--base-menu-background);
   text-align: center;
   overflow: hidden;
 
@@ -62,7 +62,7 @@ const sideTheme = computed(() => store.state.settings.sideTheme);
     & .sidebar-title {
       display: inline-block;
       margin: 0;
-      color: #fff;
+      color: var(--base-logo-title-color);
       font-weight: 600;
       line-height: 50px;
       font-size: 14px;
@@ -77,4 +77,4 @@ const sideTheme = computed(() => store.state.settings.sideTheme);
     }
   }
 }
-</style>
+</style>

src/layout/components/Sidebar/index.vue

@@ -1,21 +1,15 @@
 <template>
-  <div
-    :data-theme="sideTheme"
-    class="layout-sidebar__container"
-    :class="{ 'has-logo': showLogo }"
-    :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"
-  >
+  <div :data-theme="sideTheme" class="layout-sidebar__container" :class="{ 'has-logo': showLogo }">
     <logo v-if="showLogo" :collapse="isCollapse" />
 
     <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
       <el-menu
         :default-active="activeMenu"
         :collapse="isCollapse"
-        :background-color="sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
-        :text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
         :unique-opened="true"
         :active-text-color="theme"
         :collapse-transition="false"
+        background-color="transparent"
         mode="vertical"
       >
         <sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route" :base-path="route.path" />
@@ -53,8 +47,8 @@ const activeMenu = computed(() => {
 
 .layout-sidebar__container {
   transition: width 0.28s;
-  width: $base-sidebar-width !important;
-  background-color: $base-menu-background;
+  width: var(--base-sidebar-width);
+  background-color: var(--base-menu-background);
   height: 100%;
   position: fixed;
   font-size: 0px;
@@ -63,7 +57,8 @@ const activeMenu = computed(() => {
   left: 0;
   z-index: 1001;
   overflow: hidden;
-
+  -webkit-box-shadow: 2px 0 14px rgb(0 21 41 / 10%);
+  box-shadow: 2px 0 14px rgb(0 21 41 / 10%);
   .scrollbar-wrapper {
     overflow-x: hidden;
   }
@@ -102,7 +97,7 @@ const activeMenu = computed(() => {
 
   & .nest-menu .el-sub-menu > .el-sub-menu__title,
   & .el-sub-menu .el-menu-item {
-    min-width: $base-sidebar-width !important;
+    min-width: var(--base-sidebar-width) !important;
     // background-color: $base-menu-background !important;
 
     &:hover {

src/layout/index.vue

@@ -88,7 +88,7 @@ function setLayout() {
   top: 0;
   right: 0;
   z-index: 9;
-  width: calc(100% - #{$base-sidebar-width});
+  width: calc(100% - var(--base-sidebar-width));
   transition: width 0.28s;
 }
 .hideSidebar .fixed-header {