diff --git a/src/utils/theme/color.js b/src/utils/theme/color.js
index aaf2cf76c..df0dad506 100644
--- a/src/utils/theme/color.js
+++ b/src/utils/theme/color.js
@@ -46,8 +46,13 @@ export function colorRgbToHex(rgb) {
 }
 
 export function mix(color_1, color_2, weight) {
-  function d2h(d) { return d.toString(16) }
-  function h2d(h) { return parseInt(h, 16) }
+  function d2h(d) {
+    return d.toString(16)
+  }
+
+  function h2d(h) {
+    return parseInt(h, 16)
+  }
 
   weight = (typeof weight !== 'undefined') ? weight : 50
   let color = '#'
@@ -57,7 +62,9 @@ export function mix(color_1, color_2, weight) {
     const v2 = h2d(color_2.substr(i, 2))
     let val = d2h(Math.floor(v2 + (v1 - v2) * (weight / 100.0)))
 
-    while (val.length < 2) { val = '0' + val }
+    while (val.length < 2) {
+      val = '0' + val
+    }
     color += val
   }
   return color
@@ -71,7 +78,7 @@ export function changeMenuColor(themeColors) {
   const white = 'ffffff'
   const black = '000000'
   const menuHoverColor = mix(white, colorValue, 96)
-  const navBackgroundColor = mix(black, colorValue, 20)
+  const navBackgroundColor = mix(black, colorValue, 30)
   elementStyle.setProperty('--menu-hover', menuHoverColor)
   elementStyle.setProperty('--nav-bg', navBackgroundColor)