feat: lyrics dynamic background (#424)

* feat: init dynamic background

* feat: another way to achieve

* feat: add setting for dynamic background

* feat: add contrast and brightness for better UI

* fix: remove shadow when exit lyrics

* feat: UI improve, field name change

* refactor: scope variables

src/views/settings.vue

@@ -163,6 +163,24 @@
           </div>
         </div>
       </div>
+      <div class="item">
+        <div class="left">
+          <div class="title">{{
+            $t("settings.showLyricsDynamicBackground")
+          }}</div>
+        </div>
+        <div class="right">
+          <div class="toggle">
+            <input
+              type="checkbox"
+              name="show-lyrics-dynamic-background"
+              id="show-lyrics-dynamic-background"
+              v-model="showLyricsDynamicBackground"
+            />
+            <label for="show-lyrics-dynamic-background"></label>
+          </div>
+        </div>
+      </div>
       <div class="item" v-if="isElectron && !isMac">
         <div class="left">
           <div class="title">{{ $t("settings.minimizeToTray") }}</div>
@@ -447,6 +465,17 @@ export default {
         });
       },
     },
+    showLyricsDynamicBackground: {
+      get() {
+        return this.settings.showLyricsDynamicBackground;
+      },
+      set(value) {
+        this.$store.commit("updateSettings", {
+          key: "showLyricsDynamicBackground",
+          value,
+        });
+      },
+    },
     minimizeToTray: {
       get() {
         return this.settings.minimizeToTray;