diff --git a/app/assets/javascripts/leaflet.map.js b/app/assets/javascripts/leaflet.map.js
index 02ed318acf..b191476d21 100644
--- a/app/assets/javascripts/leaflet.map.js
+++ b/app/assets/javascripts/leaflet.map.js
@@ -32,6 +32,11 @@ L.OSM.Map = L.Map.extend({
           layerOptions.apikey = OSM[value];
         } else if (property === "leafletOsmId") {
           layerConstructor = L.OSM[value];
+        } else if (property === "darkUrl") {
+          if (OSM.isDarkMap()) {
+            layerOptions.url = value;
+            layerOptions.schemeClass = 'dark';
+          }
         } else {
           layerOptions[property] = value;
         }
@@ -52,9 +57,17 @@ L.OSM.Map = L.Map.extend({
       code: "G"
     });
 
-    this.on("layeradd", function (event) {
-      if (this.baseLayers.indexOf(event.layer) >= 0) {
-        this.setMaxZoom(event.layer.options.maxZoom);
+    this.on("layeradd", function ({layer}) {
+      if (this.baseLayers.indexOf(layer) >= 0) {
+        this.setMaxZoom(layer.options.maxZoom);
+        const container = layer.getContainer();
+        if (!container) return;
+        if (layer.options.schemeClass) container.classList.add(layer.options.schemeClass);
+        const filterRecievers = [container];
+        if (document.getElementById('map').contains(container))
+          filterRecievers.push(document.querySelector('.key-ui'));
+        for (let el of filterRecievers)
+          el.style.setProperty('--dark-mode-map-filter', layer.options.filter || 'none');
       }
     });
 
@@ -376,6 +389,17 @@ L.extend(L.Icon.Default.prototype, {
   }
 });
 
+OSM.isDarkMap = function() {
+  var themeFlags = [
+    $('body').attr('data-map-theme'),
+    $('html').attr('data-bs-theme')
+  ];
+  for (var themeFlag of themeFlags)
+    if (themeFlag)
+      return themeFlag === 'dark';
+  return window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
+
 OSM.getUserIcon = function (url) {
   return L.icon({
     iconUrl: url || OSM.MARKER_RED,