Dark mode

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