Dark mode

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