From 8f062320d3dedd74aef1964f209e60d945319041 Mon Sep 17 00:00:00 2001
From: Ian Renton <ian@ianrenton.com>
Date: Mon, 6 Apr 2026 16:16:19 +0100
Subject: [PATCH] Re-add Dark Mapnik theme (via dodgy CSS hacks)

---
 templates/about.html         |  2 +-
 templates/add_spot.html      |  4 ++--
 templates/alerts.html        |  4 ++--
 templates/bands.html         |  6 +++---
 templates/base.html          |  8 ++++----
 templates/cards/basemap.html |  1 +
 templates/conditions.html    |  4 ++--
 templates/map.html           |  6 +++---
 templates/spots.html         |  6 +++---
 templates/status.html        |  4 ++--
 webassets/css/style.css      |  3 +++
 webassets/js/map.js          | 28 +++++++++++++++++++++++++---
 12 files changed, 51 insertions(+), 25 deletions(-)

diff --git a/templates/about.html b/templates/about.html
index 1edd3b5..4be726a 100644
--- a/templates/about.html
+++ b/templates/about.html
@@ -67,7 +67,7 @@
     <p>This software is dedicated to the memory of Tom G1PJB, SK, a friend and colleague who sadly passed away around the time I started writing it in Autumn 2025. I was looking forward to showing it to you when it was done.</p>
 </div>
 
-<script src="/js/common.js?v=1775382121"></script>
+<script src="/js/common.js?v=1775488579"></script>
 <script>$(document).ready(function() { $("#nav-link-about").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}
\ No newline at end of file
diff --git a/templates/add_spot.html b/templates/add_spot.html
index 0c993e6..582d365 100644
--- a/templates/add_spot.html
+++ b/templates/add_spot.html
@@ -69,8 +69,8 @@
 
 </div>
 
-<script src="/js/common.js?v=1775382121"></script>
-<script src="/js/add-spot.js?v=1775382121"></script>
+<script src="/js/common.js?v=1775488579"></script>
+<script src="/js/add-spot.js?v=1775488579"></script>
 <script>$(document).ready(function() { $("#nav-link-add-spot").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}
\ No newline at end of file
diff --git a/templates/alerts.html b/templates/alerts.html
index c7188f9..5653013 100644
--- a/templates/alerts.html
+++ b/templates/alerts.html
@@ -56,8 +56,8 @@
 
 </div>
 
-<script src="/js/common.js?v=1775382121"></script>
-<script src="/js/alerts.js?v=1775382121"></script>
+<script src="/js/common.js?v=1775488579"></script>
+<script src="/js/alerts.js?v=1775488579"></script>
 <script>$(document).ready(function() { $("#nav-link-alerts").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}
\ No newline at end of file
diff --git a/templates/bands.html b/templates/bands.html
index 17e5f0f..6e99725 100644
--- a/templates/bands.html
+++ b/templates/bands.html
@@ -62,9 +62,9 @@
 <script>
     let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
 </script>
-<script src="/js/common.js?v=1775382121"></script>
-<script src="/js/spotsbandsandmap.js?v=1775382121"></script>
-<script src="/js/bands.js?v=1775382121"></script>
+<script src="/js/common.js?v=1775488579"></script>
+<script src="/js/spotsbandsandmap.js?v=1775488579"></script>
+<script src="/js/bands.js?v=1775488579"></script>
 <script>$(document).ready(function() { $("#nav-link-bands").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 6497f30..87c8ee0 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -46,10 +46,10 @@
             crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/tinycolor2@1.6.0/cjs/tinycolor.min.js"></script>
 
-    <script src="https://misc.ianrenton.com/jsutils/utils.js?v=1775382121"></script>
-    <script src="https://misc.ianrenton.com/jsutils/storage.js?v=1775382121"></script>
-    <script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1775382121"></script>
-    <script src="https://misc.ianrenton.com/jsutils/geo.js?v=1775382121"></script>
+    <script src="https://misc.ianrenton.com/jsutils/utils.js?v=1775488579"></script>
+    <script src="https://misc.ianrenton.com/jsutils/storage.js?v=1775488579"></script>
+    <script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1775488579"></script>
+    <script src="https://misc.ianrenton.com/jsutils/geo.js?v=1775488579"></script>
 
 </head>
 <body>
diff --git a/templates/cards/basemap.html b/templates/cards/basemap.html
index 2255849..9f2fb64 100644
--- a/templates/cards/basemap.html
+++ b/templates/cards/basemap.html
@@ -5,6 +5,7 @@
             <label for="basemap" class="form-label">Basemap</label>
             <select id="basemap" class="storeable-select form-select" oninput="displayUpdated();">
                 <option value="OpenStreetMap.Mapnik" selected>OpenStreetMap Mapnik</option>
+                <option value="OpenStreetMap.Mapnik.Dark">OpenStreetMap Mapnik (Dark)</option>
                 <option value="Esri.NatGeoWorldMap">ESRI NatGeo World Map</option>
                 <option value="Esri.WorldTopoMap">ESRI World Topo Map</option>
                 <option value="Esri.WorldShadedRelief">ESRI World Shaded Relief</option>
diff --git a/templates/conditions.html b/templates/conditions.html
index 1ddfc8e..997e3bb 100644
--- a/templates/conditions.html
+++ b/templates/conditions.html
@@ -230,8 +230,8 @@
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.umd.min.js"></script>
-<script src="/js/common.js?v=1775382121"></script>
-<script src="/js/conditions.js?v=1775382121"></script>
+<script src="/js/common.js?v=1775488579"></script>
+<script src="/js/conditions.js?v=1775488579"></script>
 <script>$(document).ready(function () {
     $("#nav-link-conditions").addClass("active");
 }); <!-- highlight active page in nav --></script>
diff --git a/templates/map.html b/templates/map.html
index 7c90f2f..adc67e8 100644
--- a/templates/map.html
+++ b/templates/map.html
@@ -79,9 +79,9 @@
 <script>
     let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
 </script>
-<script src="/js/common.js?v=1775382121"></script>
-<script src="/js/spotsbandsandmap.js?v=1775382121"></script>
-<script src="/js/map.js?v=1775382121"></script>
+<script src="/js/common.js?v=1775488579"></script>
+<script src="/js/spotsbandsandmap.js?v=1775488579"></script>
+<script src="/js/map.js?v=1775488579"></script>
 <script>$(document).ready(function() { $("#nav-link-map").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}
\ No newline at end of file
diff --git a/templates/spots.html b/templates/spots.html
index c6c0280..8356611 100644
--- a/templates/spots.html
+++ b/templates/spots.html
@@ -87,9 +87,9 @@
 <script>
     let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
 </script>
-<script src="/js/common.js?v=1775382121"></script>
-<script src="/js/spotsbandsandmap.js?v=1775382121"></script>
-<script src="/js/spots.js?v=1775382121"></script>
+<script src="/js/common.js?v=1775488579"></script>
+<script src="/js/spotsbandsandmap.js?v=1775488579"></script>
+<script src="/js/spots.js?v=1775488579"></script>
 <script>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}
\ No newline at end of file
diff --git a/templates/status.html b/templates/status.html
index 9993357..b18ccdd 100644
--- a/templates/status.html
+++ b/templates/status.html
@@ -59,8 +59,8 @@
     </div>
 </div>
 
-<script src="/js/common.js?v=1775382121"></script>
-<script src="/js/status.js?v=1775382121"></script>
+<script src="/js/common.js?v=1775488579"></script>
+<script src="/js/status.js?v=1775488579"></script>
 <script>
     $(document).ready(function() { $("#nav-link-status").addClass("active"); }); <!-- highlight active page in nav -->
 </script>
diff --git a/webassets/css/style.css b/webassets/css/style.css
index b9668d4..3e17c0b 100644
--- a/webassets/css/style.css
+++ b/webassets/css/style.css
@@ -214,6 +214,9 @@ div#map {
 .leaflet-container {
     font-family: var(--bs-body-font-family) !important;
 }
+[data-bs-theme=dark] .leaflet-control-attribution {
+    filter: invert(100%) hue-rotate(180deg) brightness(80%);
+}
 
 /* Make buttons overlaid on the map have a non-transparent fill so you can see the text better */
 .btn-outline-secondary {
diff --git a/webassets/js/map.js b/webassets/js/map.js
index 5db5b18..785a6c3 100644
--- a/webassets/js/map.js
+++ b/webassets/js/map.js
@@ -215,6 +215,13 @@ function loadOptions() {
         // Load settings from settings storage now all the controls are available
         loadSettings();
 
+        // If no basemap has been explicitly saved and the UI is in dark mode, default to dark Mapnik
+        if (localStorage.getItem("#basemap:value") === null) {
+            if (document.documentElement.getAttribute("data-bs-theme") === "dark") {
+                $("#basemap").val("OpenStreetMap.Mapnik.Dark");
+            }
+        }
+
         // Apply basemap and overlay settings now that controls have their saved values
         setBasemap($("#basemap").val());
         setBasemapOpacity(parseFloat($("#basemapOpacity").val()));
@@ -251,16 +258,24 @@ function setBasemap(basemapname) {
         if (typeof backgroundTileLayer !== 'undefined') {
             map.removeLayer(backgroundTileLayer);
         }
-        backgroundTileLayer = L.tileLayer.provider(basemapname, {
+        // OpenStreetMap.Mapnik.Dark is a synthetic variant that uses Mapnik tiles with a CSS filter applied
+        const providerName = basemapname === "OpenStreetMap.Mapnik.Dark" ? "OpenStreetMap.Mapnik" : basemapname;
+        backgroundTileLayer = L.tileLayer.provider(providerName, {
             opacity: parseFloat($("#basemapOpacity").val()),
             edgeBufferTiles: 1
         });
         backgroundTileLayer.addTo(map);
         backgroundTileLayer.bringToBack();
+        if (basemapname === "OpenStreetMap.Mapnik.Dark") {
+            var container = backgroundTileLayer.getContainer();
+            if (container) {
+                container.style.filter = 'invert(100%) hue-rotate(180deg) brightness(80%)';
+            }
+        }
 
         // Identify dark basemaps to ensure we use white text for unselected icons
         // and change the background colour appropriately
-        const basemapIsDark = basemapname === "CartoDB.DarkMatter" || basemapname === "Esri.WorldImagery";
+        const basemapIsDark = basemapname === "CartoDB.DarkMatter" || basemapname === "Esri.WorldImagery" || basemapname === "OpenStreetMap.Mapnik.Dark";
         $("#map").css('background-color', basemapIsDark ? "black" : "white");
 
         // Change the colour of the grid and zone overlays to match
@@ -380,12 +395,19 @@ function setUpMap() {
 
     // Add basemap
     loadedBasemap = $("#basemap").val();
-    backgroundTileLayer = L.tileLayer.provider(loadedBasemap, {
+    const initialProviderName = loadedBasemap === "OpenStreetMap.Mapnik.Dark" ? "OpenStreetMap.Mapnik" : loadedBasemap;
+    backgroundTileLayer = L.tileLayer.provider(initialProviderName, {
         opacity: parseFloat($("#basemapOpacity").val()),
         edgeBufferTiles: 1
     });
     backgroundTileLayer.addTo(map);
     backgroundTileLayer.bringToBack();
+    if (loadedBasemap === "OpenStreetMap.Mapnik.Dark") {
+        var container = backgroundTileLayer.getContainer();
+        if (container) {
+            container.style.filter = 'invert(100%) hue-rotate(180deg) brightness(80%)';
+        }
+    }
 
     // Add marker layer
     markersLayer = new L.LayerGroup();