From 001f2917f6bb3071a43ea6a6e1291361384ff1a2 Mon Sep 17 00:00:00 2001
From: rramiachraf <51409801+rramiachraf@users.noreply.github.com>
Date: Fri, 3 Mar 2023 13:48:11 +0100
Subject: [PATCH] feat: reactive title bar based on user's theme

Fixes #2139
---
 index.html  | 1 +
 src/App.vue | 6 ++++++
 2 files changed, 7 insertions(+)

diff --git a/index.html b/index.html
index 9e6ff884..9c96bf13 100644
--- a/index.html
+++ b/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" />
diff --git a/src/App.vue b/src/App.vue
index b59c4442..3da866f0 100644
--- a/src/App.vue
+++ b/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");