Dark mode

webassets/css/style.css

@@ -4,6 +4,10 @@
   font-weight: bold;
 }
 
+[data-bs-theme=dark] #logo {
+  filter: invert(100%) hue-rotate(180deg) brightness(80%);
+}
+
 
 /* INTRO/WARNING BOXES */
 
@@ -27,7 +31,7 @@ div.container {
 }
 
 
-/* ABOUT PAGE*/
+/* ABOUT PAGE */
 
 #info-container{
     width: 100%;
@@ -65,6 +69,13 @@ button#add-spot-button {
 
 /* SPOTS/ALERTS PAGES, MAIN TABLE */
 
+/* Fudge apply our own "dark primary" background as Bootstrap do this itself */
+[data-bs-theme=dark] tr.table-primary {
+    --bs-table-bg: #053680;
+    --bs-table-border-color: #021b42;
+    --bs-table-color: white;
+}
+
 td.nowrap, span.nowrap {
     text-wrap: nowrap;
 }
@@ -152,6 +163,12 @@ div#map {
     font-family: var(--bs-body-font-family) !important;
 }
 
+[data-bs-theme=dark] .leaflet-layer,
+[data-bs-theme=dark] .leaflet-control-attribution {
+  filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
+}
+
+
 
 /* BANDS PANEL */
 
@@ -227,6 +244,10 @@ div.band-spot {
     cursor: default;
 }
 
+[data-bs-theme=dark] div.band-spot {
+    background-color: black;
+}
+
 div.band-spot:hover {
     z-index: 999;
 }

webassets/js/alerts.js

@@ -51,7 +51,7 @@ function updateTable() {
     var showRef = $("#tableShowRef")[0].checked;
 
     // Populate table with headers
-    let table = $('<table class="table table-hover">').append('<thead><tr class="table-primary"></tr></thead><tbody></tbody>');
+    let table = $('<table class="table">').append('<thead><tr class="table-primary"></tr></thead><tbody></tbody>');
     if (showStartTime) {
         table.find('thead tr').append(`<th>${useLocalTime ? "Start&nbsp;(Local)" : "Start&nbsp;UTC"}</th>`);
     }
@@ -307,6 +307,12 @@ 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

@@ -199,6 +199,25 @@ function latLonForGridSWCornerPlusSize(grid) {
     return [lat, lon, latCellSize, lonCellSize];
 }
 
+// Function to set dark mode on or off
+function enableDarkMode(dark) {
+    $("html").attr("data-bs-theme", dark ? "dark" : "light");
+}
+
+// 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);
+    }
+}
+
 // Save settings to local storage
 function saveSettings() {
     // Find all storeable UI elements, store a key of "element id:property name" mapped to the value of that
@@ -225,3 +244,8 @@ function loadSettings() {
         }
     });
 }
+
+// Startup
+$(document).ready(function() {
+    usePreferredTheme();
+});

webassets/js/spots.js

@@ -46,7 +46,7 @@ function updateTable() {
     var showDE = $("#tableShowDE")[0].checked;
 
     // Populate table with headers
-    let table = $('<table class="table table-hover">').append('<thead><tr class="table-primary"></tr></thead><tbody></tbody>');
+    let table = $('<table class="table">').append('<thead><tr class="table-primary"></tr></thead><tbody></tbody>');
     if (showTime) {
         table.find('thead tr').append(`<th>${useLocalTime ? "Local" : "UTC"}</th>`);
     }
@@ -282,7 +282,7 @@ function loadOptions() {
 
         // Populate the filters panel
         generateBandsMultiToggleFilterCard(options["bands"]);
-        generateSIGsMultiToggleFilterCard(options["sigs"]);console.log(options["sigs"]);
+        generateSIGsMultiToggleFilterCard(options["sigs"]);
         generateMultiToggleFilterCard("#dx-continent-options", "dx_continent", options["continents"]);
         generateMultiToggleFilterCard("#de-continent-options", "de_continent", options["continents"]);
         generateMultiToggleFilterCard("#mode-options", "mode_type", options["mode_types"]);

webassets/js/spotsbandsandmap.js

@@ -46,4 +46,10 @@ function generateSIGsMultiToggleFilterCard(sig_options) {
 function filtersUpdated() {
     loadSpots();
     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();
 }