完善侧边栏样式，引入全局变量设置背景颜色，字体颜色及logo颜色

src/assets/styles/sidebar.scss

@@ -4,6 +4,7 @@
     overflow-y: hidden;
     z-index: 1001;
     transition: width 0.28s ease;
+    background-image: var(--base-menu-background);
     background-color: var(--base-menu-background);
     height: 100%;
     display: flex;
@@ -96,14 +97,38 @@
 }
 
 // when menu collapsed
+.el-menu--vertical.theme-dark {
+  // the scroll bar appears when the subMenu is too long
+  > .el-menu--popup {
+    max-height: 100vh;
+    // overflow-y: auto;
+    background-image: $base-menu-background;
+    background-color: $base-menu-background;
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+    svg {
+      margin-right: 5px;
+    }
+    .el-menu-item {
+      --el-menu-text-color: #{$base-menu-text-color};
+    }
+    .el-sub-menu__title {
+      --el-menu-text-color: #{$base-menu-text-color};
+    }
+  }
+}
+
 .el-menu--vertical {
   // the scroll bar appears when the subMenu is too long
   > .el-menu--popup {
     max-height: 100vh;
-    overflow-y: auto;
-
+    // overflow-y: auto;
     &::-webkit-scrollbar {
       width: 6px;
     }
+    svg {
+      margin-right: 5px;
+    }
   }
 }

src/assets/styles/variables.module.scss

@@ -21,20 +21,19 @@ $panGreen: #30b08f;
   //登录框宽度
   --base-login-width: 280px;
 }
-
-$base-menu-background: #324157;
-$base-menu-light-background: #ffffff;
-$base-menu-color: #bfcbd9;
-$base-menu-light-color: rgba(0, 0, 0, 0.7);
+// #324157
+$base-menu-background: linear-gradient(-225deg, #cbbacc 0%, #2580b3 100%);
+$base-menu-title-color: #ffffff;
+$base-menu-text-color: #e5eaf3;
 
 /***侧边栏深色配置***/
 [data-theme='theme-dark'] {
-  --base-menu-background: #324157;
+  --base-menu-background: #{$base-menu-background};
   // --base-menu-background: linear-gradient(to right, #243949 0%, #517fa4 100%);
-  --base-logo-title-color: #ffffff;
+  --base-logo-title-color: #{$base-menu-title-color};
   // // el-ement ui 设置
   // --el-fill-color-blank: #304156;
-  --el-text-color-primary: #e5eaf3;
+  --el-text-color-primary: #{$base-menu-text-color};
   --el-menu-text-color: var(--el-text-color-primary);
 }
 html.dark {
@@ -49,10 +48,3 @@ html.cafe {
 html.contrast {
   filter: contrast(2);
 }
-
-:export {
-  menuColor: $base-menu-color;
-  menuLightColor: $base-menu-light-color;
-  menuBackground: $base-menu-background;
-  menuLightBackground: $base-menu-light-background;
-}

src/layout/components/Sidebar/Logo.vue

@@ -44,7 +44,7 @@ const sideTheme = computed(() => settingsStore.sideTheme)
   width: 100%;
   height: 50px;
   line-height: 50px;
-  background: var(--base-menu-background);
+  // background: var(--base-menu-background);
   text-align: center;
   overflow: hidden;
 

src/layout/components/Sidebar/SidebarItem.vue

@@ -15,7 +15,7 @@
       </app-link>
     </template>
 
-    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)">
+    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" :popper-class="sideTheme">
       <template #title>
         <svg-icon :name="item.meta && item.meta.icon" />
         <span v-if="item.meta && item.meta.titleKey">{{ $t(item.meta.titleKey) }}</span>
@@ -31,7 +31,10 @@
 import { isExternal } from '@/utils/validate'
 import AppLink from './Link'
 import { getNormalPath } from '@/utils/ruoyi'
+import useSettingsStore from '@/store/modules/settings'
 
+const settingsStore = useSettingsStore()
+const sideTheme = computed(() => settingsStore.sideTheme)
 const props = defineProps({
   // route object
   item: {