From c448230c141609bd290859e43678502751f58172 Mon Sep 17 00:00:00 2001
From: qier222 <68148142+qier222@users.noreply.github.com>
Date: Sun, 25 Oct 2020 21:55:20 +0800
Subject: [PATCH] feat: dynamic PWA theme color

---
 src/store/index.js     | 18 ++++--------------
 src/utils/common.js    | 12 ++++++++++++
 src/views/settings.vue | 13 +++----------
 3 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/src/store/index.js b/src/store/index.js
index 6b29733..5b10180 100644
--- a/src/store/index.js
+++ b/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 (
-  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"
-  );
-}
+changeAppearance(store.state.settings.appearance);
 window
   .matchMedia("(prefers-color-scheme: dark)")
-  .addEventListener("change", (e) => {
+  .addEventListener("change", () => {
     if (store.state.settings.appearance === "auto") {
-      store.commit("updateTmpAppearance", e.matches ? "dark" : "light");
-      document.body.setAttribute("data-theme", e.matches ? "dark" : "light");
+      changeAppearance(store.state.settings.appearance);
     }
   });
 
diff --git a/src/utils/common.js b/src/utils/common.js
index 6e75f54..3663147 100644
--- a/src/utils/common.js
+++ b/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");
+}
diff --git a/src/views/settings.vue b/src/views/settings.vue
index 60df284..54517e8 100644
--- a/src/views/settings.vue
+++ b/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") {
-          document.body.setAttribute(
-            "data-theme",
-            window.matchMedia("(prefers-color-scheme: dark)").matches
-              ? "dark"
-              : "light"
-          );
-        } else {
-          document.body.setAttribute("data-theme", value);
-        }
+        changeAppearance(value);
       },
     },
     musicQuality: {