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 1/4] 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 @@ Piped + 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"); From 68c904e1704cd05168e79f825e9e41667644b15d Mon Sep 17 00:00:00 2001 From: rramiachraf <51409801+rramiachraf@users.noreply.github.com> Date: Fri, 3 Mar 2023 13:53:21 +0100 Subject: [PATCH 2/4] refactor: remove leading space --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 9c96bf13..aa72f1ba 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ Piped - + From 951dbec46284590231f8d82658309cc069308584 Mon Sep 17 00:00:00 2001 From: rramiachraf <51409801+rramiachraf@users.noreply.github.com> Date: Sat, 4 Mar 2023 23:19:02 +0100 Subject: [PATCH 3/4] fix: make title bar reactive on auto mode --- src/App.vue | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/App.vue b/src/App.vue index 3da866f0..5f1282f5 100644 --- a/src/App.vue +++ b/src/App.vue @@ -34,10 +34,12 @@ export default { if (themePref == "auto") this.theme = darkModePreference.matches ? "dark" : "light"; else this.theme = themePref; - // Change title bar color to white + // Change title bar color based on user's theme + const themeColor = document.querySelector("meta[name='theme-color']"); if (this.theme === "light") { - const themeColor = document.querySelector("meta[name='theme-color']"); themeColor.setAttribute("content", "#FFF"); + } else { + themeColor.setAttribute("content", "#0F0F0F"); } // Used for the scrollbar From 0fd8e923c06d8fc4430e6607c80d38e5d25e697a Mon Sep 17 00:00:00 2001 From: Kavin <20838718+FireMasterK@users.noreply.github.com> Date: Sun, 5 Mar 2023 20:24:57 +0000 Subject: [PATCH 4/4] Indent tag properly. --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index aa72f1ba..abc042ea 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ Piped - +