ugly hack to make dynamic theme work in styles, see maplibre/maplibre…

…-gl-js#4964
hiddewie · Nov 2, 2024 · 35e2599 · 35e2599
1 parent ec5f452
commit 35e2599
Showing 1 changed file with 43 additions and 2 deletions.
diff --git a/proxy/js/ui.js b/proxy/js/ui.js
@@ -471,12 +471,53 @@ const onStyleChange = changedStyle => {
   // Change styles
   map.setStyle(mapStyles[changedStyle], {
     validate: false,
+    transformStyle: (previous, next) => {
+      let style = next;
+
+      // Apply theme to style
+      if (resolveTheme(configuration.theme ?? defaultConfiguration.theme) === 'dark') {
+        style = {
+          ...style,
+          layers: style.layers.map(layer => {
+            if (layer.paint) {
+              if (layer.paint['text-color'] === 'black') {
+                layer.paint['text-color'] = 'white'
+                layer.paint['text-halo-color'] = 'black'
+              }
+            }
+
+            return layer;
+          })
+        }
+      }
+
+      return style;
+    },
   });
   legendMap.setStyle(legendStyles[changedStyle], {
     validate: false,
     transformStyle: (previous, next) => {
-      onStylesheetChange(next);
-      return next;
+      let style = next;
+
+      // Apply theme to style
+      if (resolveTheme(configuration.theme ?? defaultConfiguration.theme) === 'dark') {
+        style = {
+          ...style,
+          layers: style.layers.map(layer => {
+            if (layer.paint) {
+              if (layer.paint['text-color'] === 'black') {
+                layer.paint['text-color'] = 'white'
+                layer.paint['text-halo-color'] = 'black'
+              }
+            }
+
+            return layer;
+          })
+        }
+      }
+
+      onStylesheetChange(style);
+      return style;
     },
   });