diff --git a/src/styles/default-theme.scss b/src/styles/default-theme.scss
index 81176ba56..b95d55432 100644
--- a/src/styles/default-theme.scss
+++ b/src/styles/default-theme.scss
@@ -8,6 +8,7 @@
   --menu-text: #646A73;
   --menu-hover: #f4faf9;
   --submenu-bg: #ffffff;
+  --nav-bg: #148f76;
 }
 
 :export {
@@ -20,4 +21,5 @@
   --menu-text: #646A73;
   --menu-hover: #f4faf9;
   --submenu-bg: #ffffff;
+  --nav-bg: #148f76;
 }
diff --git a/src/utils/theme/color.js b/src/utils/theme/color.js
index 00e62bad3..aaf2cf76c 100644
--- a/src/utils/theme/color.js
+++ b/src/utils/theme/color.js
@@ -68,9 +68,12 @@ export function changeMenuColor(themeColors) {
   const colors = Object.keys(themeColors).length > 0 ? themeColors : defaultThemeConfig
 
   const colorValue = colors['--color-primary'].replace(/#/g, '')
-  const black = 'ffffff'
-  const menuHoverColor = mix(black, colorValue, 96)
+  const white = 'ffffff'
+  const black = '000000'
+  const menuHoverColor = mix(white, colorValue, 96)
+  const navBackgroundColor = mix(black, colorValue, 20)
   elementStyle.setProperty('--menu-hover', menuHoverColor)
+  elementStyle.setProperty('--nav-bg', navBackgroundColor)
 
   for (const key in colors) {
     const currentColor = colors[key]