patch CSS for Maplibre to support dark mode

hiddewie · Nov 2, 2024 · 63922fa · 63922fa
1 parent ded894a
commit 63922fa
Showing 1 changed file with 23 additions and 0 deletions.
diff --git a/proxy/css/ui.css b/proxy/css/ui.css
@@ -55,6 +55,29 @@ body {
   background-size: 24px;
   background-image: url("data:image/svg+xml,%3Csvg width='800' height='800' viewBox='0 0 200 200' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36.5 75C41 89.5 54 100 70 100s29-10.5 33.5-25H170a10 10 0 0 0 0-20h-66.5C99 40.5 86 30 70 30S41 40.5 36.5 55H25a10 10 0 0 0 0 20ZM70 50a15 15 0 1 1-15 15 14.73 14.73 0 0 1 15-15Zm105 75h-11.5c-4.5-14.5-17.5-25-33.5-25s-29 10.5-33.5 25H30a10 10 0 0 0 0 20h66.5c4.5 14.5 17.5 25 33.5 25s29-10.5 33.5-25H175a10 10 0 0 0 0-20Zm-45 25a15 15 0 1 1 15-15 14.73 14.73 0 0 1-15 15Z'/%3E%3C/svg%3E");
 }
+
+/** Patch Maplibre GL to respect the page theme */
+#map-container .maplibregl-ctrl-group,
+.maplibregl-ctrl-attrib.maplibregl-compact,
+.maplibregl-ctrl-attrib a,
+.maplibregl-ctrl-scale {
+  background: var(--bs-body-bg);
+  color: var(--bs-body-color);
+}
+.maplibregl-ctrl-scale {
+  background: rgba(var(--bs-body-bg-rgb), 0.8);
+  color: var(--bs-body-color);
+}
+[data-bs-theme="dark"] .maplibregl-ctrl-scale {
+  border-top-color: var(--bs-border-color);
+  border-right-color: var(--bs-light);
+  border-left-color: var(--bs-light);
+  border-bottom-color: var(--bs-light);
+}
+[data-bs-theme="dark"] .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button {
+  background-color: var(--bs-light);
+}
+
 .maplibregl-ctrl-group button.maplibregl-ctrl-search {
   padding: 4px;
   width: auto;