From febd62d8a8d0d4a5b836a5556718bbabdb3352b5 Mon Sep 17 00:00:00 2001
From: Hunter Thornsberry <hunter@hunterthornsberry.com>
Date: Fri, 7 Jun 2024 13:55:19 -0400
Subject: [PATCH 1/2] fix #199

---
 src/pages/Map.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/Map.tsx b/src/pages/Map.tsx
index 6916df5..098fe45 100644
--- a/src/pages/Map.tsx
+++ b/src/pages/Map.tsx
@@ -20,7 +20,7 @@ import MapGl from "react-map-gl/maplibre";
 
 export const MapPage = (): JSX.Element => {
   const { nodes, waypoints } = useDevice();
-  const { rasterSources } = useAppStore();
+  const { rasterSources, darkMode } = useAppStore();
   const { default: map } = useMap();
 
   const [zoom, setZoom] = useState(0);
@@ -128,6 +128,7 @@ export const MapPage = (): JSX.Element => {
           attributionControl={false}
           renderWorldCopies={false}
           maxPitch={0}
+          style = {{filter: darkMode ? 'invert(100%)' : ''}}
           dragRotate={false}
           touchZoomRotate={false}
           initialViewState={{
@@ -160,6 +161,7 @@ export const MapPage = (): JSX.Element => {
                   key={node.num}
                   longitude={node.position.longitudeI / 1e7}
                   latitude={node.position.latitudeI / 1e7}
+                  style = {{filter: darkMode ? 'invert(100%)' : ''}}
                   anchor="bottom"
                 >
                   <div

From 99c240e81a4ce9810b88819f4db9275d360a649b Mon Sep 17 00:00:00 2001
From: Hunter Thornsberry <hunter@hunterthornsberry.com>
Date: Sun, 16 Jun 2024 16:30:09 -0400
Subject: [PATCH 2/2] updated styling

---
 src/pages/Map.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Map.tsx b/src/pages/Map.tsx
index 098fe45..eaff3f6 100644
--- a/src/pages/Map.tsx
+++ b/src/pages/Map.tsx
@@ -128,7 +128,7 @@ export const MapPage = (): JSX.Element => {
           attributionControl={false}
           renderWorldCopies={false}
           maxPitch={0}
-          style = {{filter: darkMode ? 'invert(100%)' : ''}}
+          style = {{filter: darkMode ? 'brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7)' : ''}}
           dragRotate={false}
           touchZoomRotate={false}
           initialViewState={{
@@ -161,7 +161,7 @@ export const MapPage = (): JSX.Element => {
                   key={node.num}
                   longitude={node.position.longitudeI / 1e7}
                   latitude={node.position.latitudeI / 1e7}
-                  style = {{filter: darkMode ? 'invert(100%)' : ''}}
+                  style = {{filter: darkMode ? 'invert(1)' : ''}}
                   anchor="bottom"
                 >
                   <div