fix: update status bar color

Author: afonsosousah

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") {

scripts/extras.js

@@ -94,8 +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,6 +110,10 @@ function downloadObjectAsJson(exportObj, exportName) {
 	downloadAnchorNode.remove();
 }
 
+function isDarkMode() {
+	return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+
 function getTLD() {
 	let hostname = window.location.hostname;
 

scripts/user.js

@@ -282,7 +282,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() {
@@ -480,7 +480,7 @@ function openStatisticsMenu() {
 	updateStatisticsChart();
 
 	// Set status bar color in PWA
-	changeThemeColor("#231f20");
+	changeThemeColor("#231f20", "#1a1517");
 }
 
 function hideStatisticsMenu() {