diff --git a/app/assets/javascripts/leaflet.layers.js b/app/assets/javascripts/leaflet.layers.js
index 35b958c7aa..f3bc3349ae 100644
--- a/app/assets/javascripts/leaflet.layers.js
+++ b/app/assets/javascripts/leaflet.layers.js
@@ -31,6 +31,9 @@ L.OSM.layers = function (options) {
         var miniMap = L.map(mapContainer[0], { attributionControl: false, zoomControl: false, keyboard: false })
           .addLayer(new layer.constructor(layer.options));
 
+        if (layer.options.schemeClass) miniMap.getPane("tilePane").classList.add(layer.options.schemeClass);
+        miniMap.getPane("tilePane").style.setProperty("--dark-mode-map-filter", layer.options.filter || "none");
+
         miniMap.dragging.disable();
         miniMap.touchZoom.disable();
         miniMap.doubleClickZoom.disable();
diff --git a/app/assets/javascripts/leaflet.map.js b/app/assets/javascripts/leaflet.map.js
index 6537b0b233..7434fe3ec9 100644
--- a/app/assets/javascripts/leaflet.map.js
+++ b/app/assets/javascripts/leaflet.map.js
@@ -32,6 +32,9 @@ L.OSM.Map = L.Map.extend({
           layerOptions.apikey = OSM[value];
         } else if (property === "leafletOsmId") {
           layerConstructor = L.OSM[value];
+        } else if (property === "leafletOsmDarkId" && OSM.isDarkMap() && L.OSM[value]) {
+          layerConstructor = L.OSM[value];
+          layerOptions.schemeClass = "dark";
         } else {
           layerOptions[property] = value;
         }
@@ -52,9 +55,14 @@ 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) return;
+      this.setMaxZoom(layer.options.maxZoom);
+      const container = layer.getContainer();
+      if (layer.options.schemeClass) container.classList.add(layer.options.schemeClass);
+      for (let filterReceiver of [container, document.querySelector(".key-ui")]) {
+        if (!filterReceiver) continue;
+        filterReceiver.style.setProperty("--dark-mode-map-filter", layer.options.filter || "none");
       }
     });
 
@@ -379,6 +387,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,
diff --git a/config/layers.yml b/config/layers.yml
index 98ef2e6915..30cf29d298 100644
--- a/config/layers.yml
+++ b/config/layers.yml
@@ -39,6 +39,7 @@
         href: "https://www.thunderforest.com/"
 
 - leafletOsmId: "TransportMap"
+  leafletOsmDarkId: "TransportDarkMap"
   code: "T"
   layerId: "transportmap"
   nameId: "transport_map"