From c46cec91dcd85de76a73df45c2ebf5fe5fa580f1 Mon Sep 17 00:00:00 2001
From: Florian Maurer <f.maurer@outlook.de>
Date: Wed, 12 Aug 2026 00:29:30 +0200
Subject: [PATCH] map: invert vector map in dark mode This allows for vector
 maps to also be inverted in dark mode

---
 CONFIGURATION.md         | 3 ++-
 config.example.json      | 1 +
 dev-fixtures/config.json | 9 +++++++++
 lib/map.ts               | 3 ++-
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/CONFIGURATION.md b/CONFIGURATION.md
index f6228d7e..aac76873 100644
--- a/CONFIGURATION.md
+++ b/CONFIGURATION.md
@@ -56,13 +56,14 @@ Defines a List of Maps that are used as a background.
       "url": "https://sgx.geodatenzentrum.de/gdz_basemapworld_vektor/styles/bm_web_wld_col.json",
       "type": "vector",
       "config": {
+        "invertInDarkMode": true,
         "attribution": "&copy; basemap.de / <a href='https://www.bkg.bund.de'>BKG</a> (2025) <a href='https://creativecommons.org/licenses/by/4.0/'>CC BY 4.0</a>; Datenquellen: &copy; GeoBasis-DE / <a href='https://www.bkg.bund.de'>BKG</a> (2025) <a href='https://creativecommons.org/licenses/by/4.0/'>CC BY 4.0</a>; außerhalb Deutschlands: &copy; <a href='https://www.openstreetmap.org/copyright'>Open Street Map Mitwirkende ODbL v. 1.0</a> ; © <a href='https://openmaptiles.org/'>OpenMapTiles</a>"
       }
     }
   ],
 ```
 
-The `invertInDarkMode` boolean allows you to automatically invert standard map tiles (like light OpenStreetMap) via CSS when the app switches to dark mode, matching the dark aesthetic without needing a dedicated dark tile server. Note that this property is ignored for vector map layers.
+The `invertInDarkMode` boolean allows you to automatically invert standard map tiles (like light OpenStreetMap) via CSS when the app switches to dark mode, matching the dark aesthetic without needing a dedicated dark tile server. It works for raster tile layers as well as for vector layers, where the filter is applied to the rendered WebGL canvas.
 
 `fixedCenter` defines the default area that is visible when opening the map.
 
diff --git a/config.example.json b/config.example.json
index 6c02288b..c729f734 100644
--- a/config.example.json
+++ b/config.example.json
@@ -17,6 +17,7 @@
     {
       "name": "BaseMap.de (Vektor)",
       "url": "https://sgx.geodatenzentrum.de/gdz_basemapworld_vektor/styles/bm_web_wld_col.json",
+      "invertInDarkMode": true,
       "type": "vector",
       "config": {
         "attribution": "&copy; basemap.de / <a href='https://www.bkg.bund.de'>BKG</a> (2025) <a href='https://creativecommons.org/licenses/by/4.0/'>CC BY 4.0</a>; Datenquellen: &copy; GeoBasis-DE / <a href='https://www.bkg.bund.de'>BKG</a> (2025) <a href='https://creativecommons.org/licenses/by/4.0/'>CC BY 4.0</a>; außerhalb Deutschlands: &copy; <a href='https://www.openstreetmap.org/copyright'>Open Street Map Mitwirkende ODbL v. 1.0</a> ; © <a href='https://openmaptiles.org/'>OpenMapTiles</a>"
diff --git a/dev-fixtures/config.json b/dev-fixtures/config.json
index 6948e674..8ab8a3ac 100644
--- a/dev-fixtures/config.json
+++ b/dev-fixtures/config.json
@@ -77,6 +77,15 @@
         "start": 30,
         "attribution": "&copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> | Map Data &copy;  <a href=\"http://arcgis.com/about/\" target=\"_blank\">ArcGIS Sattelite</a>"
       }
+    },
+    {
+      "name": "BaseMap.de (Vektor)",
+      "url": "https://sgx.geodatenzentrum.de/gdz_basemapworld_vektor/styles/bm_web_wld_col.json",
+      "type": "vector",
+      "config": {
+        "invertInDarkMode": true,
+        "attribution": "&copy; basemap.de / <a href='https://www.bkg.bund.de'>BKG</a> (2025) <a href='https://creativecommons.org/licenses/by/4.0/'>CC BY 4.0</a>; Datenquellen: &copy; GeoBasis-DE / <a href='https://www.bkg.bund.de'>BKG</a> (2025) <a href='https://creativecommons.org/licenses/by/4.0/'>CC BY 4.0</a>; außerhalb Deutschlands: &copy; <a href='https://www.openstreetmap.org/copyright'>Open Street Map Mitwirkende ODbL v. 1.0</a> ; © <a href='https://openmaptiles.org/'>OpenMapTiles</a>"
+      }
     }
   ]
 }
diff --git a/lib/map.ts b/lib/map.ts
index 0c4be795..74641518 100644
--- a/lib/map.ts
+++ b/lib/map.ts
@@ -103,7 +103,8 @@ export const Map = function (linkScale: (t: any) => any, sidebar: ReturnType<typ
               style: layer.url,
               attributionControl: { customAttribution: layerConfig.attribution },
               maxZoom: layerConfig.maxZoom,
-            })
+              className: layerConfig.className,
+            } as L.LeafletMaplibreGLOptions)
           : L.tileLayer(
               layer.url.replace(
                 "{format}",