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

README.md

@@ -35,9 +35,9 @@ These are supplied with the URL to the page you want to embed, for example for a
 The supported parameters are as follows. Generally these match the equivalent parameters in the real Spothole API, where a mapping exists.
 
 | Name           | Allowed Values          | Default | Example                 | Description                                                                                                                                                           |
-|----------------|-----------------------|---------|-------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+|----------------|-------------------------|---------|-------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | `embedded`     | `true`, `false`         | `false` | `?embedded=true`        | Enables embedded mode.                                                                                                                                                |
-| `dark-mode`    | `true`, `false`       | `false` | `?dark-mode=true`       | Enables dark mode.                                                                                                                                                    |
+| `color-scheme` | `light`, `dark`, `auto` | `auto`  | `?color-scheme=dark`    | Forces light or dark mode in preference to the operating system default.                                                                                              |
 | `time-zone`    | `UTC`, `local`          | `UTC`   | `?time-zone=local`      | Sets times to be in UTC or local time.                                                                                                                                |
 | `limit`        | 10, 25, 50, 100         | 50      | `?limit=50`             | Sets the number of spots that will be displayed on the main spots page                                                                                                |
 | `limit`        | 25, 50, 100, 200, 500   | 100     | `?limit=100`            | Sets the number of alerts that will be displayed on the alerts page                                                                                                   |

templates/alerts.html

@@ -112,12 +112,14 @@
                     <div class="card">
                         <div class="card-body">
                             <h5 class="card-title">Theme</h5>
-                                <div class="form-group">
+                            <p class="card-text spothole-card-text">
-                                    <div class="form-check form-check-inline">
+                                <label class="form-check-label" for="color-scheme">UI color scheme</label>
-                                        <input class="form-check-input storeable-checkbox" type="checkbox" id="darkMode" value="darkMode" oninput="toggleDarkMode();">
+                                <select id="color-scheme" class="storeable-select form-select d-inline-block" oninput="setColorSchemeFromUI();" style="display: inline-block;">
-                                        <label class="form-check-label" for="darkMode">Dark mode</label>
+                                    <option value="auto" selected>Automatic</option>
-                                    </div>
+                                    <option value="light">Light</option>
-                                </div>
+                                    <option value="dark">Dark</option>
+                                </select>
+                            </p>
                         </div>
                     </div>
                 </div>

templates/bands.html

@@ -112,13 +112,16 @@
                     <div class="card">
                         <div class="card-body">
                             <h5 class="card-title">Theme</h5>
-                                <div class="form-group">
-                                    <div class="form-check form-check-inline">
-                                        <input class="form-check-input storeable-checkbox" type="checkbox" id="darkMode" value="darkMode" oninput="toggleDarkMode();">
-                                        <label class="form-check-label" for="darkMode">Dark mode</label>
-                                    </div>
                             <p class="card-text spothole-card-text">
-                                        Band color scheme<br/>
+                                <label class="form-check-label" for="color-scheme">UI color scheme</label>
+                                <select id="color-scheme" class="storeable-select form-select d-inline-block" oninput="setColorSchemeFromUI();" style="display: inline-block;">
+                                    <option value="auto" selected>Automatic</option>
+                                    <option value="light">Light</option>
+                                    <option value="dark">Dark</option>
+                                </select>
+                            </p>
+                            <p class="card-text spothole-card-text">
+                                <label class="form-check-label" for="band-color-scheme">Band color scheme</label><br/>
                                 <select id="band-color-scheme" class="storeable-select form-select d-inline-block" oninput="setBandColorSchemeFromUI();" style="display: inline-block;">
                                 </select>
                             </p>
@@ -128,7 +131,6 @@
             </div>
         </div>
     </div>
-    </div>
 
     <div id="bands-container"></div>
 

templates/map.html

@@ -124,13 +124,16 @@
                         <div class="card">
                             <div class="card-body">
                                 <h5 class="card-title">Theme</h5>
-                                    <div class="form-group">
-                                        <div class="form-check form-check-inline">
-                                            <input class="form-check-input storeable-checkbox" type="checkbox" id="darkMode" value="darkMode" oninput="toggleDarkMode();">
-                                            <label class="form-check-label" for="darkMode">Dark mode</label>
-                                        </div>
                                 <p class="card-text spothole-card-text">
-                                            Band color scheme<br/>
+                                    <label class="form-check-label" for="color-scheme">UI color scheme</label>
+                                    <select id="color-scheme" class="storeable-select form-select d-inline-block" oninput="setColorSchemeFromUI();" style="display: inline-block;">
+                                        <option value="auto" selected>Automatic</option>
+                                        <option value="light">Light</option>
+                                        <option value="dark">Dark</option>
+                                    </select>
+                                </p>
+                                <p class="card-text spothole-card-text">
+                                    <label class="form-check-label" for="band-color-scheme">Band color scheme</label><br/>
                                     <select id="band-color-scheme" class="storeable-select form-select d-inline-block" oninput="setBandColorSchemeFromUI();" style="display: inline-block;">
                                     </select>
                                 </p>
@@ -142,7 +145,6 @@
         </div>
     </div>
 </div>
-</div>
 
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.css">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-extra-markers@1.2.2/dist/css/leaflet.extra-markers.min.css">

templates/spots.html

@@ -155,14 +155,16 @@
                     <div class="card">
                         <div class="card-body">
                             <h5 class="card-title">Theme</h5>
-                            <div class="form-group">
-                                <div class="form-check form-check-inline">
-                                    <input class="form-check-input storeable-checkbox" type="checkbox" id="darkMode" value="darkMode" oninput="toggleDarkMode();">
-                                    <label class="form-check-label" for="darkMode">Dark mode</label>
-                                </div>
-                            </div>
                             <p class="card-text spothole-card-text">
-                                Band color scheme<br/>
+                                <label class="form-check-label" for="color-scheme">UI color scheme</label>
+                                <select id="color-scheme" class="storeable-select form-select d-inline-block" oninput="setColorSchemeFromUI();" style="display: inline-block;">
+                                    <option value="auto" selected>Automatic</option>
+                                    <option value="light">Light</option>
+                                    <option value="dark">Dark</option>
+                                </select>
+                            </p>
+                            <p class="card-text spothole-card-text">
+                                <label class="form-check-label" for="band-color-scheme">Band color scheme</label><br/>
                                 <select id="band-color-scheme" class="storeable-select form-select d-inline-block" oninput="setBandColorSchemeFromUI();" style="display: inline-block;">
                                 </select>
                             </p>

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, "color-scheme", "color-scheme");
-    updateSelectFromParam(params, "time-zone", "timeZone"); // Only on Spots and Alerts pages
+    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 to set the colour scheme based on the state of the UI select box
-function enableDarkMode(dark) {
+function setColorSchemeFromUI() {
-    $("html").attr("data-bs-theme", dark ? "dark" : "light");
+    setColorScheme($("#color-scheme option:selected").val());
-    const metaThemeColor = document.querySelector("meta[name=theme-color]");
+    saveSettings();
-    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");
 }
 
-// Startup function to determine whether to use light or dark mode
+// Function to set the color scheme. Supported values: "dark", "light", "auto"
-function usePreferredTheme() {
+function setColorScheme(mode) {
-    // First, work out if we have ever explicitly saved the value of our toggle
+    let effectiveModeDark = mode == "dark";
-    let val = localStorage.getItem("#darkMode:checked");
+    if (mode == "auto") {
-    if (val != null) {
+        effectiveModeDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-        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);
     }
+    $("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());