feat: reactive title bar based on user's theme

Fixes #2139

index.html

@@ -7,6 +7,7 @@
         <link rel="icon" href="/favicon.ico" />
         <link title="Piped" type="application/opensearchdescription+xml" rel="search" href="/opensearch.xml" />
         <title>Piped</title>
+	 <meta name="theme-color" content="#0f0f0f">
         <meta property="og:title" content="Piped" />
         <meta property="og:type" content="website" />
         <meta property="og:image" content="/img/icons/favicon-32x32.png" />

src/App.vue

@@ -34,6 +34,12 @@ export default {
             if (themePref == "auto") this.theme = darkModePreference.matches ? "dark" : "light";
             else this.theme = themePref;
 
+            // Change title bar color to white
+            if (this.theme === "light") {
+                const themeColor = document.querySelector("meta[name='theme-color']");
+                themeColor.setAttribute("content", "#FFF");
+            }
+
             // Used for the scrollbar
             const root = document.querySelector(":root");
             this.theme == "dark" ? root.classList.add("dark") : root.classList.remove("dark");