Allow users to return to "Automatic" colour scheme. #102

webassets/js/alerts.js

@@ -312,12 +312,6 @@ function filtersUpdated() {
     saveSettings();
 }
 
-// Function to set dark mode based on the state of the UI toggle in spots, bands and map pages
-function toggleDarkMode() {
-    enableDarkMode($("#darkMode")[0].checked);
-    saveSettings();
-}
-
 // React to toggling/closing panels
 function toggleFiltersPanel() {
     // If we are going to display the filters panel, hide the display panel

webassets/js/common.js

@@ -20,8 +20,8 @@ function loadURLParams() {
     }
 
     // Handle other params
-    updateCheckboxFromParam(params, "dark-mode", "darkMode");
-    updateSelectFromParam(params, "time-zone", "timeZone"); // Only on Spots and Alerts pages
+    updateSelectFromParam(params, "color-scheme", "color-scheme");
+    updateSelectFromParam(params, "time-zone", "time-zone"); // Only on Spots and Alerts pages
     updateSelectFromParam(params, "limit", "spots-to-fetch"); // Only on Spots page
     updateSelectFromParam(params, "limit", "alerts-to-fetch"); // Only on Alerts page
     updateSelectFromParam(params, "max_age", "max-spot-age"); // Only on Map & Bands pages
@@ -38,10 +38,6 @@ function updateCheckboxFromParam(params, paramName, checkboxID) {
     let v = params.get(paramName);
     if (v != null) {
         $("#" + checkboxID).prop("checked", (v === "true") ? true : false);
-        // Extra check if this is the "dark mode" toggle
-        if (checkboxID == "darkMode") {
-            enableDarkMode((v === "true") ? true : false);
-        }
     }
 }
 
@@ -50,6 +46,10 @@ function updateSelectFromParam(params, paramName, selectID) {
     let v = params.get(paramName);
     if (v != null) {
         $("#" + selectID).prop("value", v);
+        // Extra check if this is the "color scheme" select
+        if (selectID == "color-scheme") {
+            setColorScheme(v);
+        }
     }
 }
 
@@ -142,30 +142,45 @@ function columnsUpdated() {
     saveSettings();
 }
 
-// Function to set dark mode on or off
-function enableDarkMode(dark) {
-    $("html").attr("data-bs-theme", dark ? "dark" : "light");
-    const metaThemeColor = document.querySelector("meta[name=theme-color]");
-    metaThemeColor.setAttribute("content", dark ? "black" : "white");
-    const metaAppleStatusBarStyle = document.querySelector("meta[name=apple-mobile-web-app-status-bar-style]");
-    metaAppleStatusBarStyle.setAttribute("content", dark ? "black-translucent" : "white-translucent");
+// Function to set the colour scheme based on the state of the UI select box
+function setColorSchemeFromUI() {
+    setColorScheme($("#color-scheme option:selected").val());
+    saveSettings();
 }
 
-// Startup function to determine whether to use light or dark mode
-function usePreferredTheme() {
-    // First, work out if we have ever explicitly saved the value of our toggle
-    let val = localStorage.getItem("#darkMode:checked");
-    if (val != null) {
-        enableDarkMode(JSON.parse(val));
-    } else {
-        // Never set it before, so use the system default theme and set the toggle up to match
-        let dark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-        enableDarkMode(dark);
-        $("#darkMode").prop('checked', dark);
+// Function to set the color scheme. Supported values: "dark", "light", "auto"
+function setColorScheme(mode) {
+    let effectiveModeDark = mode == "dark";
+    if (mode == "auto") {
+        effectiveModeDark = window.matchMedia('(prefers-color-scheme: dark)').matches
     }
+    $("html").attr("data-bs-theme", effectiveModeDark ? "dark" : "light");
+    const metaThemeColor = document.querySelector("meta[name=theme-color]");
+    metaThemeColor.setAttribute("content", effectiveModeDark ? "black" : "white");
+    const metaAppleStatusBarStyle = document.querySelector("meta[name=apple-mobile-web-app-status-bar-style]");
+    metaAppleStatusBarStyle.setAttribute("content", effectiveModeDark ? "black-translucent" : "white-translucent");
+}
+
+// Startup function to determine whether to use light or dark mode, or leave as auto
+function usePreferredTheme() {
+    // Work out if we have ever explicitly saved the value of our select box. If so, we set our colour scheme now based
+    // on that. If not, we let the select retain its default value of "auto".
+    let val = localStorage.getItem("#color-scheme:value");
+    if (val != null) {
+        setColorScheme(JSON.parse(val));
+    }
+}
+
+// Sets up a listener on the OS light-dark theme change. If the Spothole user theme is set to Auto, the UI will be
+// updated, otherwise if the Spothole user theme is forced to light or dark, that preference will remain.
+function listenForOSThemeChange() {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+        setColorScheme($("#color-scheme option:selected").val());
+    });
 }
 
 // Startup
 $(document).ready(function() {
     usePreferredTheme();
+    listenForOSThemeChange();
 });

webassets/js/spotsbandsandmap.js

@@ -110,12 +110,6 @@ function filtersUpdated() {
     saveSettings();
 }
 
-// Function to set dark mode based on the state of the UI toggle in spots, bands and map pages
-function toggleDarkMode() {
-    enableDarkMode($("#darkMode")[0].checked);
-    saveSettings();
-}
-
 // Function to update the band colour scheme in spots, bands and map pages
 function setBandColorSchemeFromUI() {
     setBandColorScheme($("#band-color-scheme option:selected").val());