fix: update status bar color

afonsosousah · Mar 12, 2024 · 3386e5b · 3386e5b
1 parent c7235ed
commit 3386e5b
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -108,6 +108,9 @@
 				navigator.serviceWorker.register("scripts/serviceworker.js");
 			}
 
+			// Check theme to set status bar color
+			changeThemeColor("#ffffff", "#000000");
+
 			// Check if location permission is given
 			navigator.permissions.query({ name: "geolocation" }).then(result => {
 				if (result.state === "granted") {

diff --git a/scripts/extras.js b/scripts/extras.js
@@ -94,9 +94,10 @@ function parseMillisecondsIntoTripTime(milliseconds, showSeconds = true) {
 	return (absoluteHours > 0 ? h + "h" : "") + m + "m" + (showSeconds ? s + "s" : "");
 }
 
-
-function changeThemeColor(color) {
-	metaThemeColor = document.querySelector("meta[name=theme-color]").setAttribute("content", color);
+function changeThemeColor(color, darkModeColor = null) {
+	isDarkMode() && darkModeColor
+		? document.querySelector("meta[name=theme-color]").setAttribute("content", darkModeColor)
+		: document.querySelector("meta[name=theme-color]").setAttribute("content", color);
 }
 
 function downloadObjectAsJson(exportObj, exportName) {
@@ -108,3 +109,7 @@ function downloadObjectAsJson(exportObj, exportName) {
 	downloadAnchorNode.click();
 	downloadAnchorNode.remove();
 }
+
+function isDarkMode() {
+	return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
diff --git a/scripts/user.js b/scripts/user.js
@@ -220,7 +220,7 @@ function hideUserSettings() {
 		userSettings.classList.add("smooth-slide-to-bottom");
 		setTimeout(() => userSettings.remove(), 300); // remove element after animation end
 	}
-	changeThemeColor("#ffffff"); // Set status bar color in PWA
+	changeThemeColor("#ffffff", "#000000"); // Set status bar color in PWA
 }
 
 function openSetProxyPrompt() {
@@ -414,7 +414,7 @@ function openStatisticsMenu() {
 	updateStatisticsChart();
 
 	// Set status bar color in PWA
-	changeThemeColor("#231f20");
+	changeThemeColor("#231f20", "#1a1517");
 }
 
 function hideStatisticsMenu() {