diff --git a/README.md b/README.md
index 3b12017..40bad2b 100644
--- a/README.md
+++ b/README.md
@@ -34,20 +34,20 @@ 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. |
-| `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 |
-| `max_age` | 300, 600, 1800, 3600 | 1800 | `?max_age=1800` | Sets the maximum age of spots displayed on the map and bands pages, in seconds. |
-| `band` | Comma-separated list | (all) | `?band=20m,40m` | Sets the list of bands that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface. |
-| `sig` | Comma-separated list | (all) | `?sig=POTA,SOTA,NO_SIG` | Sets the list of SIGs that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface. |
-| `source` | Comma-separated list | (all) | `?source=Cluster` | Sets the list of sources that will be shown on any spot or alert pages. Available options match the labels of the buttons in the standard web interface. |
-| `mode_type` | Comma-separated list | (all) | `?mode_type=PHONE,CW` | Sets the list of mode types that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface. |
-| `dx_continent` | Comma-separated list | (all) | `?dx_continent=NA,SA` | Sets the list of DX Continents that will be shown on any spot or alert pages. Available options match the labels of the buttons in the standard web interface. |
-| `de_continent` | Comma-separated list | (all) | `?de_continent=EU` | Sets the list of DE Continents that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface. |
+| Name | Allowed Values | Default | Example | Description |
+|----------------|-------------------------|---------|-------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `embedded` | `true`, `false` | `false` | `?embedded=true` | Enables embedded 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 |
+| `max_age` | 300, 600, 1800, 3600 | 1800 | `?max_age=1800` | Sets the maximum age of spots displayed on the map and bands pages, in seconds. |
+| `band` | Comma-separated list | (all) | `?band=20m,40m` | Sets the list of bands that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface. |
+| `sig` | Comma-separated list | (all) | `?sig=POTA,SOTA,NO_SIG` | Sets the list of SIGs that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface. |
+| `source` | Comma-separated list | (all) | `?source=Cluster` | Sets the list of sources that will be shown on any spot or alert pages. Available options match the labels of the buttons in the standard web interface. |
+| `mode_type` | Comma-separated list | (all) | `?mode_type=PHONE,CW` | Sets the list of mode types that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface. |
+| `dx_continent` | Comma-separated list | (all) | `?dx_continent=NA,SA` | Sets the list of DX Continents that will be shown on any spot or alert pages. Available options match the labels of the buttons in the standard web interface. |
+| `de_continent` | Comma-separated list | (all) | `?de_continent=EU` | Sets the list of DE Continents that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface. |
More will be added soon to allow customisation of filters and other display properties.
diff --git a/templates/alerts.html b/templates/alerts.html
index d35cc00..fb24224 100644
--- a/templates/alerts.html
+++ b/templates/alerts.html
@@ -112,12 +112,14 @@
diff --git a/webassets/js/alerts.js b/webassets/js/alerts.js
index 37e1a2a..3d3d0cd 100644
--- a/webassets/js/alerts.js
+++ b/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
diff --git a/webassets/js/common.js b/webassets/js/common.js
index 2e2eb29..c9e2957 100644
--- a/webassets/js/common.js
+++ b/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();
});
diff --git a/webassets/js/spotsbandsandmap.js b/webassets/js/spotsbandsandmap.js
index 903aedc..2d46a25 100644
--- a/webassets/js/spotsbandsandmap.js
+++ b/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());