w1cdn/spothole
1
0
Fork 0
mirror of https://git.ianrenton.com/ian/spothole.git synced 2026-02-04 09:14:30 +00:00
Code Issues 13 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ian Renton
2026-01-30 17:12:57 +00:00
parent edb8dd5e0e
commit 721d345332
8 changed files with 96 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -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 |

14
templates/alerts.html
View File

@@ -112,12 +112,14 @@
<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">
<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>
</div>
</div>
</div>

16
templates/bands.html
View File

@@ -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>

16
templates/map.html
View File

@@ -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>
@@ -141,7 +144,6 @@
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.css">

16
templates/spots.html
View File

@@ -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>

6
webassets/js/alerts.js
View File

@@ -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

63
webassets/js/common.js
View File

@@ -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();
});

6
webassets/js/spotsbandsandmap.js
View File

@@ -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());