feat(map): improve dark theme styles of map (#18269)

PostHog · Oct 30, 2023 · 211aeb2 · 211aeb2
1 parent ba570e1
commit 211aeb2
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 1 deletion.
diff --git a/frontend/src/lib/components/Map/Map.tsx b/frontend/src/lib/components/Map/Map.tsx
@@ -6,6 +6,7 @@ import layers from 'protomaps-themes-base'
 import useResizeObserver from 'use-resize-observer'
 
 import 'maplibre-gl/dist/maplibre-gl.css'
+import './Maplibre.scss'
 
 import { themeLogic } from '~/layout/navigation-3000/themeLogic'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
@@ -74,7 +75,7 @@ export function MapComponent({ center, markers, className }: MapProps): JSX.Elem
                 marker.addTo(map.current)
             }
         }
-    }, [])
+    }, [isDarkModeOn])
 
     useResizeObserver({
         ref: mapContainer,

diff --git a/frontend/src/lib/components/Map/Maplibre.scss b/frontend/src/lib/components/Map/Maplibre.scss
@@ -0,0 +1,29 @@
+.maplibregl-ctrl-attrib-button:focus,
+.maplibregl-ctrl-group button:focus {
+    box-shadow: 0 0 2px 2px var(--primary);
+}
+
+@media screen {
+    .maplibregl-ctrl-attrib.maplibregl-compact {
+        background-color: var(--bg-light);
+        color: var(--muted-3000);
+    }
+
+    .maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-button {
+        background-color: var(--bg-3000);
+        [theme='dark'] & {
+            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' width='24' height='24' fill-rule='evenodd' viewBox='0 0 20 20'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E");
+        }
+    }
+
+    .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button {
+        background-color: var(--bg-3000);
+        [theme='dark'] & {
+            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' width='24' height='24' fill-rule='evenodd' viewBox='0 0 20 20'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E");
+        }
+    }
+
+    .maplibregl-ctrl-attrib a {
+        color: var(--text-3000);
+    }
+}