feat: add the --bgm-bg-color to adapt to dark mode

Author: zsw

components/Mode/modeOptions.js

@@ -4,14 +4,16 @@ const modeOptions = {
     '--box-shadow': '0 1px 6px 0 rgba(0, 0, 0, 0.2)',
     '--box-shadow-hover': '0 2px 16px 0 rgba(0, 0, 0, 0.2)',
     '--text-color': '#2c3e50',
-    '--border-color': '#eaecef'
+    '--border-color': '#eaecef',
+    '--bgm-bg-color': 'rgba(255, 255, 255, .7)'
   },
   dark: {
     '--background-color': '#25272a',
     '--box-shadow': '0 1px 6px 0 rgba(0, 0, 0, .9)',
     '--box-shadow-hover': '0 2px 26px 0 rgba(0, 0, 0, .9)',
     '--text-color': '#aaa',
-    '--border-color': 'rgba(0, 0, 0, .9)'
+    '--border-color': 'rgba(0, 0, 0, .9)',
+    '--bgm-bg-color': 'rgba(0, 0, 0, .7)'
   }
 }
 

styles/mode.styl

@@ -4,9 +4,11 @@
   --box-shadow-hover $boxShadowHover
   --text-color $textColor
   --border-color $borderColor
+  --bgm-bg-color $bgmBgColor
   @media (prefers-color-scheme: dark)
     --background-color $backgroundColorDark
     --box-shadow $boxShadowDark
     --box-shadow-hover $boxShadowHoverDark
     --text-color $textColorDark
     --border-color $borderColorDark
+    --bgm-bg-color $bgmBgColorDark

styles/palette.styl

@@ -15,3 +15,6 @@ $textColorDark ?= #aaa
 
 $borderColor ?= #eaecef
 $borderColorDark ?= rgba(0, 0, 0, .9)
+
+$bgmBgColor ?= rgba(255, 255, 255, .7)
+$bgmBgColorDark ?= rgba(0, 0, 0, .7)