From ad96dd6023a8d68f415b6dcc70e665f62e77b720 Mon Sep 17 00:00:00 2001
From: Luke Prior <22492406+LukePrior@users.noreply.github.com>
Date: Sun, 24 Oct 2021 08:32:33 +1100
Subject: [PATCH] Support dark mode fully in live map (#225)

* Update style.css

* dark mode map

Co-authored-by: Uskompuf <22492406+Uskompuf@users.noreply.github.com>
---
 RX_FSK/data/livemap.js | 19 ++++++++++++++-----
 RX_FSK/data/style.css  |  7 +++++++
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/RX_FSK/data/livemap.js b/RX_FSK/data/livemap.js
index 75c2614..9d425cf 100644
--- a/RX_FSK/data/livemap.js
+++ b/RX_FSK/data/livemap.js
@@ -14,11 +14,20 @@ $(document).ready(function(){
   L.control.scale().addTo(map);
   L.control.attribution({prefix:false}).addTo(map);
 
-  var osm = L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {
-    attribution: '<div><a href="https://leafletjs.com/">Leaflet</a> &middot; Map: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a></div>',
-    minZoom: 1,
-    maxZoom: 19
-  });
+  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    var osm = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
+      minZoom: 1,
+      maxZoom: 19
+    });
+  } else {
+    var osm = L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {
+      attribution: '<div><a href="https://leafletjs.com/">Leaflet</a> &middot; Map: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a></div>',
+      minZoom: 1,
+      maxZoom: 19
+    });
+  }
+
   var esri = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
     attribution: '<div><a href="https://leafletjs.com/">Leaflet</a> &middot; Map: <a href="https://www.esri.com/">Esri</a> &middot; Earthstar Geographics</div>',
     minZoom: 1,
diff --git a/RX_FSK/data/style.css b/RX_FSK/data/style.css
index e1f8777..8d93559 100755
--- a/RX_FSK/data/style.css
+++ b/RX_FSK/data/style.css
@@ -370,4 +370,11 @@ p{
     color: white;
     background-color: grey;
   }
+  .leaflet-bar a {
+    background-color: grey !important;
+  }
+  .leaflet-popup-content-wrapper, .leaflet-popup-tip {
+    color: white !important;
+    background: grey !important;
+  }
 }