diff --git a/src/layout/components/NavHeader/ViewSwitcher.vue b/src/layout/components/NavHeader/ViewSwitcher.vue
index 37c25497b..af3de1d8a 100644
--- a/src/layout/components/NavHeader/ViewSwitcher.vue
+++ b/src/layout/components/NavHeader/ViewSwitcher.vue
@@ -188,8 +188,8 @@ export default {
 }
 .el-menu-item.is-active {
   font-weight: bold;
-  color: var(--submenu-active-text);
-  border-left: 4px solid var(--menu-active-left);
+  color: var(--color-primary);
+  border-left: 4px solid var(--color-primary);
 }
 .menu-main.mobile-view-switch >>> .el-submenu__icon-arrow {
   right: 10px;
diff --git a/src/layout/components/NavLeft/index.vue b/src/layout/components/NavLeft/index.vue
index ca7205928..cb77e3364 100644
--- a/src/layout/components/NavLeft/index.vue
+++ b/src/layout/components/NavLeft/index.vue
@@ -150,11 +150,11 @@ export default {
       transform: translateY(-50%);
       z-index: 1;
       &:hover {
-        color: var(--menu-active-text);
+        color: var(--color-primary);
       }
       .icon {
         &:hover {
-          color: var(--submenu-active-text);
+          color: var(--color-primary);
         }
       }
     }
diff --git a/src/styles/default-theme.scss b/src/styles/default-theme.scss
index 02410b2ef..a17dd76dc 100644
--- a/src/styles/default-theme.scss
+++ b/src/styles/default-theme.scss
@@ -8,10 +8,6 @@
   --menu-text: #646A73;
   --menu-hover: #f4faf9;
   --submenu-bg: #ffffff;
-  --submenu-hover: #f4faf9;
-  --submenu-active-text: #2b937c;
-  --menu-active-text: #1F2329;
-  --menu-active-left: #2b937c;
 }
 
 :export {
@@ -24,8 +20,4 @@
   --menu-text: #646A73;
   --menu-hover: #f4faf9;
   --submenu-bg: #ffffff;
-  --submenu-hover: #f4faf9;
-  --submenu-active-text: #2b937c;
-  --menu-active-text: #1F2329;
-  --menu-active-left: #2b937c;
 }
diff --git a/src/styles/menu.scss b/src/styles/menu.scss
index 96c2c75cc..7361e81c5 100644
--- a/src/styles/menu.scss
+++ b/src/styles/menu.scss
@@ -94,7 +94,7 @@
   }
 
   li.is-active {
-    // border-left: 4px solid $menuActiveLeft;
+    // border-left: 4px solid var(--color-primary);
   }
 
   .el-submenu-sidebar .el-menu-item {
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 45fa2c241..91bda4f43 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -199,7 +199,8 @@
       height: 36px;
       line-height: 36px;
       &.is-active {
-        border-left: 4px solid $menuActiveLeft;
+        color: var(--color-primary);
+        border-left: 4px solid var(--color-primary);
       }
     }
   }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 9e6d20e81..629a9944a 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -16,13 +16,12 @@ $--color-link-highlight: #23527c;
 
 // Menu
 $menuText: var(--menu-text);
-$menuActiveLeft: var(--menu-active-left);
 $menuActiveText: var(--color-primary);
-$menuBg: white;
+$menuBg: var(--menu-bg);
 $menuTextWeight: 600;
 $menuHover: var(--menu-hover);
-$subMenuBg: white;
-$subMenuHover: #f4faf9;
+$subMenuBg: var(--submenu-bg);
+$subMenuHover: var(--menu-hover);
 $subMenuActiveText: var(--color-primary);
 $sideBarWidth: 200px;
 
diff --git a/src/utils/theme/color.js b/src/utils/theme/color.js
index fb8bc0eaf..e1f3ec3b5 100644
--- a/src/utils/theme/color.js
+++ b/src/utils/theme/color.js
@@ -67,18 +67,16 @@ export function changeMenuColor(themeColors) {
   const elementStyle = document.documentElement.style
   const colors = Object.keys(themeColors).length > 0 ? themeColors : defaultThemeConfig
 
+  const colorValue = themeColors['--color-primary'].replace(/#/g, '')
+  const black = 'ffffff'
+  const menuHoverColor = mix(black, colorValue, 96)
+  elementStyle.setProperty('--menu-hover', menuHoverColor)
+
   for (const key in colors) {
     const currentColor = colors[key]
-    const colorValue = currentColor.replace(/#/g, '')
-    elementStyle.setProperty(key, currentColor)
-    const black = '000000'
-    if (key === '--menu-bg') {
-      const menuHoverColor = mix(black, colorValue, 10)
-      const subMenuBgColor = mix(black, colorValue, 20)
-      const subMenuHoverColor = mix(black, colorValue, 35)
-      elementStyle.setProperty('--menu-hover', menuHoverColor)
-      elementStyle.setProperty('--submenu-bg', subMenuBgColor)
-      elementStyle.setProperty('--submenu-hover', subMenuHoverColor)
+
+    if (key.includes('--color')) {
+      elementStyle.setProperty(key, currentColor)
     }
   }
 }