also change meta tag theme-color

3 years ago · 37f1d60f82
2 changed files with 17 additions and 6 deletions
--- a/index.html
+++ b/index.html
@ -1,13 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-    <link rel="icon" type="image/svg+xml" href="/icon.svg"/>
-    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
-    <meta name="theme-color" content="#5cdd8b"/>
-    <meta name="description" content="Uptime Kuma monitoring tool"/>
+    <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+    <meta name="theme-color" id="theme-color" content="" />
+    <meta name="description" content="Uptime Kuma monitoring tool" />
    <title>Uptime Kuma</title>
 </head>
 <body>
--- a/src/mixins/theme.js
+++ b/src/mixins/theme.js
@ -14,6 +14,7 @@ export default {
        }

        document.body.classList.add(this.theme);
+        this.updateThemeColorMeta();
    },

    computed: {
@ -33,6 +34,17 @@ export default {
        theme(to, from) {
            document.body.classList.remove(from);
            document.body.classList.add(this.theme);
+            this.updateThemeColorMeta();
+        }
+    },
+
+    methods: {
+        updateThemeColorMeta() {
+            if (this.theme === "dark") {
+                document.querySelector("#theme-color").setAttribute("content", "#161B22");
+            } else {
+                document.querySelector("#theme-color").setAttribute("content", "#5cdd8b");
+            }
        }
    }
 }