feat: dynamic PWA theme color

src/store/index.js

@@ -5,6 +5,7 @@ import mutations from "./mutations";
 import actions from "./actions";
 import initState from "./initState";
 import { Howl, Howler } from "howler";
+import { changeAppearance } from "@/utils/common";
 
 if (localStorage.getItem("appVersion") === null) {
   localStorage.setItem("player", JSON.stringify(initState.player));
@@ -45,23 +46,12 @@ if ([undefined, null].includes(store.state.settings.lang)) {
   localStorage.setItem("settings", JSON.stringify(store.state.settings));
 }
 
-if (
+changeAppearance(store.state.settings.appearance);
-  store.state.settings.appearance !== "auto" &&
-  store.state.settings.appearance !== undefined
-) {
-  document.body.setAttribute("data-theme", store.state.settings.appearance);
-} else {
-  document.body.setAttribute(
-    "data-theme",
-    window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
-  );
-}
 window
   .matchMedia("(prefers-color-scheme: dark)")
-  .addEventListener("change", (e) => {
+  .addEventListener("change", () => {
     if (store.state.settings.appearance === "auto") {
-      store.commit("updateTmpAppearance", e.matches ? "dark" : "light");
+      changeAppearance(store.state.settings.appearance);
-      document.body.setAttribute("data-theme", e.matches ? "dark" : "light");
     }
   });
 

src/utils/common.js

@@ -95,3 +95,15 @@ export function dailyTask() {
     dailySignin(1);
   }
 }
+
+export function changeAppearance(appearance) {
+  if (appearance === "auto" || appearance === undefined) {
+    appearance = window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
+  }
+  document.body.setAttribute("data-theme", appearance);
+  document
+    .querySelector('meta[name="theme-color"]')
+    .setAttribute("content", appearance === "dark" ? "#222" : "#fff");
+}

src/views/settings.vue

@@ -113,6 +113,8 @@
 <script>
 import { mapState } from "vuex";
 import { doLogout } from "@/utils/auth";
+import { changeAppearance } from "@/utils/common";
+
 export default {
   name: "settings",
   computed: {
@@ -136,16 +138,7 @@ export default {
           key: "appearance",
           value,
         });
-        if (value === "auto") {
+        changeAppearance(value);
-          document.body.setAttribute(
-            "data-theme",
-            window.matchMedia("(prefers-color-scheme: dark)").matches
-              ? "dark"
-              : "light"
-          );
-        } else {
-          document.body.setAttribute("data-theme", value);
-        }
       },
     },
     musicQuality: {