diff --git a/template/admin/src/i18n/lang/en.js b/template/admin/src/i18n/lang/en.js
index b13c0c842..6103d04f4 100644
--- a/template/admin/src/i18n/lang/en.js
+++ b/template/admin/src/i18n/lang/en.js
@@ -101,6 +101,7 @@ export default {
 	layout: {
 		configTitle: 'Layout configuration',
 		oneTitle: 'Global Themes',
+		menuBag: 'Menu BG Color',
 		twoTitle: 'Menu / top bar',
 		twoTopBar: 'Top bar background',
 		twoMenuBar: 'Menu background',
diff --git a/template/admin/src/i18n/lang/zh-cn.js b/template/admin/src/i18n/lang/zh-cn.js
index 352d2e7a1..4e6bdc004 100644
--- a/template/admin/src/i18n/lang/zh-cn.js
+++ b/template/admin/src/i18n/lang/zh-cn.js
@@ -101,6 +101,7 @@ export default {
 	layout: {
 		configTitle: '布局配置',
 		oneTitle: '全局主题',
+		menuBag: '菜单背景色',
 		twoTitle: '菜单 / 顶栏',
 		twoTopBar: '顶栏背景',
 		twoMenuBar: '菜单背景',
diff --git a/template/admin/src/i18n/lang/zh-tw.js b/template/admin/src/i18n/lang/zh-tw.js
index 118b7e81e..36f92ba32 100644
--- a/template/admin/src/i18n/lang/zh-tw.js
+++ b/template/admin/src/i18n/lang/zh-tw.js
@@ -101,6 +101,7 @@ export default {
 	layout: {
 		configTitle: '佈局配寘',
 		oneTitle: '全域主題',
+		menuBag: '菜單背景色',
 		twoTitle: '選單 / 頂欄',
 		twoTopBar: '頂欄背景',
 		twoMenuBar: '選單背景',
diff --git a/template/admin/src/layout/navBars/breadcrumb/setings.vue b/template/admin/src/layout/navBars/breadcrumb/setings.vue
index 0518ff8aa..221602be6 100644
--- a/template/admin/src/layout/navBars/breadcrumb/setings.vue
+++ b/template/admin/src/layout/navBars/breadcrumb/setings.vue
@@ -18,6 +18,13 @@
             </el-color-picker>
           </div>
         </div>
+        <div class="layout-breadcrumb-seting-bar-flex">
+          <div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.menuBag') }}</div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-color-picker v-model="getThemeConfig.menuBgColor" size="small" @change="onMenuBgColorChange">
+            </el-color-picker>
+          </div>
+        </div>
         <div class="layout-breadcrumb-seting-bar-flex mt15">
           <div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsDark') }}</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
@@ -333,6 +340,12 @@ export default {
       }
       this.setLocalThemeConfig();
     },
+    onMenuBgColorChange() {
+      if (!this.getThemeConfig.menuBgColor) return;
+      // 颜色加深
+      document.documentElement.style.setProperty('--prev-bg-menuBar', this.getThemeConfig.menuBgColor);
+      this.setLocalThemeConfig();
+    },
     // 深色模式
     onAddDarkChange() {
       const body = document.documentElement;
diff --git a/template/admin/src/store/module/themeConfig.js b/template/admin/src/store/module/themeConfig.js
index d3b7d8de6..b35e84b94 100644
--- a/template/admin/src/store/module/themeConfig.js
+++ b/template/admin/src/store/module/themeConfig.js
@@ -14,6 +14,8 @@ const themeConfigModule = {
 			 */
 			// 默认 primary 主题颜色
 			primary: '#409eff',
+			// 菜单背景色
+			menuBgColor: '#282c34',
 			// 是否开启深色模式
 			isIsDark: false,
 
@@ -27,11 +29,11 @@ const themeConfigModule = {
 			// 默认顶栏导航字体颜色
 			topBarColor: '#606266',
 			// 默认菜单导航背景颜色
-			menuBar: '#545c64',
+			menuBar: '#282c34',
 			// 默认菜单导航字体颜色
 			menuBarColor: '#eaeaea',
 			// 默认分栏菜单背景颜色
-			columnsMenuBar: '#545c64',
+			columnsMenuBar: '#282c34',
 			// 默认分栏菜单字体颜色
 			columnsMenuBarColor: '#e6e6e6',