diff --git a/app/assets/javascripts/leaflet.map.js b/app/assets/javascripts/leaflet.map.js
index e0c2ee60b4..e7974026e6 100644
--- a/app/assets/javascripts/leaflet.map.js
+++ b/app/assets/javascripts/leaflet.map.js
@@ -21,7 +21,7 @@ L.OSM.Map = L.Map.extend({
       if (layerDefinition.apiKeyId && !OSM[layerDefinition.apiKeyId]) continue;
 
       let layerConstructor = L.OSM.TileLayer;
-      const layerOptions = {};
+      const layerOptions = { className: "" };
 
       for (const [property, value] of Object.entries(layerDefinition)) {
         if (property === "credit") {
@@ -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 === "leafletOsmDarkId" && OSM.isDarkMap() && L.OSM[value]) {
+          layerConstructor = L.OSM[value];
+          layerOptions.className += " dark";
+        } else if (property === "filterClass" && OSM.isDarkMap()) {
+          layerOptions.className += " " + value;
         } else {
           layerOptions[property] = value;
         }
@@ -52,10 +57,12 @@ 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 key = document.querySelector(".key-ui");
+      if (!key) return;
+      key.className = "key-ui " + layer.options.className;
     });
 
     function makeAttribution(credit) {
@@ -386,6 +393,14 @@ L.extend(L.Icon.Default.prototype, {
   }
 });
 
+OSM.isDarkMap = function () {
+  var mapTheme = $("body").attr("data-map-theme");
+  if (mapTheme) return mapTheme === "dark";
+  var siteTheme = $("html").attr("data-bs-theme");
+  if (siteTheme) return siteTheme === "dark";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+};
+
 OSM.getUserIcon = function (url) {
   return L.icon({
     iconUrl: url || OSM.MARKER_RED,
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 9ce6aec343..423e565301 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -9,7 +9,6 @@
 
 body {
   font-size: $typeheight;
-  --dark-mode-map-filter: brightness(.8);
 }
 
 time[title] {
@@ -516,13 +515,13 @@ body.small-nav {
 }
 
 @mixin dark-map-color-scheme {
-  .leaflet-tile-container,
+  .leaflet-layer,
   .mapkey-table-entry td:first-child > * {
-    filter: var(--dark-mode-map-filter);
+    filter: var(--dark-mode-map-filter, none);
   }
 
-  .leaflet-tile-container .leaflet-tile {
-    filter: none;
+  .no-filter, .dark {
+    --dark-mode-map-filter: none;
   }
 }
 
diff --git a/config/layers.yml b/config/layers.yml
index 98ef2e6915..b98a6e74be 100644
--- a/config/layers.yml
+++ b/config/layers.yml
@@ -31,6 +31,7 @@
   apiKeyId: "THUNDERFOREST_KEY"
   canEmbed: true
   canDownloadImage: true
+  filterClass: "no-filter"
   credit:
     id: "thunderforest_credit"
     children:
@@ -39,6 +40,7 @@
         href: "https://www.thunderforest.com/"
 
 - leafletOsmId: "TransportMap"
+  leafletOsmDarkId: "TransportDarkMap"
   code: "T"
   layerId: "transportmap"
   nameId: "transport_map"