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