diff --git a/app/assets/javascripts/leaflet.layers.js b/app/assets/javascripts/leaflet.layers.js
index 35b958c7aa..e130779515 100644
--- a/app/assets/javascripts/leaflet.layers.js
+++ b/app/assets/javascripts/leaflet.layers.js
@@ -15,6 +15,7 @@ L.OSM.layers = function (options) {
         .appendTo(baseSection);
 
       var mapContainer = $("<div class='position-absolute top-0 start-0 bottom-0 end-0 z-0 bg-body-secondary'>")
+        .css("--dark-mode-map-filter", layer.options.darkFilter)
         .appendTo(buttonContainer);
 
       var input = $("<input type='radio' class='btn-check' name='layer'>")
@@ -60,13 +61,7 @@ L.OSM.layers = function (options) {
       });
 
       input.on("click", function () {
-        layers.forEach(function (other) {
-          if (other === layer) {
-            map.addLayer(other);
-          } else {
-            map.removeLayer(other);
-          }
-        });
+        map.updateLayers(layer.options.code);
         map.fire("baselayerchange", { layer: layer });
       });
 
diff --git a/app/assets/javascripts/leaflet.map.js b/app/assets/javascripts/leaflet.map.js
index 02ed318acf..a3b9825fc3 100644
--- a/app/assets/javascripts/leaflet.map.js
+++ b/app/assets/javascripts/leaflet.map.js
@@ -104,19 +104,24 @@ L.OSM.Map = L.Map.extend({
   },
 
   updateLayers: function (layerParam) {
-    var layers = layerParam || "M",
-        layersAdded = "";
+    var layerCodes = layerParam || "M",
+        addedLayer;
 
     for (var i = this.baseLayers.length - 1; i >= 0; i--) {
-      if (layers.indexOf(this.baseLayers[i].options.code) >= 0) {
+      if (layerCodes.indexOf(this.baseLayers[i].options.code) >= 0 && !addedLayer) {
         this.addLayer(this.baseLayers[i]);
-        layersAdded = layersAdded + this.baseLayers[i].options.code;
-      } else if (i === 0 && layersAdded === "") {
+        addedLayer = this.baseLayers[i];
+      } else if (i === 0 && !addedLayer) {
         this.addLayer(this.baseLayers[i]);
+        addedLayer = this.baseLayers[i];
       } else {
         this.removeLayer(this.baseLayers[i]);
       }
     }
+
+    if (addedLayer) {
+      $("body").css("--dark-mode-map-filter", addedLayer.options.darkFilter);
+    }
   },
 
   getLayersCode: function () {
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index c5e2d14b15..b0b706562d 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -9,6 +9,7 @@
 
 body {
   font-size: $typeheight;
+  --dark-mode-map-filter: brightness(.8);
 }
 
 time[title] {
@@ -507,7 +508,7 @@ body.small-nav {
 @include color-mode(dark) {
   .leaflet-tile-container .leaflet-tile,
   .mapkey-table-entry td:first-child > * {
-    filter: brightness(.8);
+    filter: var(--dark-mode-map-filter);
   }
 
   .leaflet-container .leaflet-control-attribution a {
diff --git a/config/layers.yml b/config/layers.yml
index 4f883cc940..25a02fbb6d 100644
--- a/config/layers.yml
+++ b/config/layers.yml
@@ -6,6 +6,7 @@
     id: "make_a_donation"
     href: "https://supporting.openstreetmap.org"
     donate: true
+  darkFilter: "invert(.9) hue-rotate(180deg)"
 
 - leafletOsmId: "CyclOSM"
   code: "Y"
@@ -20,6 +21,7 @@
       osm_france_link:
         id: "osm_france"
         href: "https://openstreetmap.fr/"
+  darkFilter: "brightness(.8)"
 
 - leafletOsmId: "CycleMap"
   code: "C"
@@ -32,6 +34,7 @@
       thunderforest_link:
         id: "andy_allan"
         href: "https://www.thunderforest.com/"
+  darkFilter: "brightness(.8)"
 
 - leafletOsmId: "TransportMap"
   code: "T"
@@ -44,6 +47,7 @@
       thunderforest_link:
         id: "andy_allan"
         href: "https://www.thunderforest.com/"
+  darkFilter: "invert(.9) hue-rotate(180deg)"
 
 - leafletOsmId: "TracestrackTopo"
   code: "P"
@@ -56,6 +60,7 @@
       tracestrack_link:
         id: "tracestrack"
         href: "https://www.tracestrack.com/"
+  darkFilter: "brightness(.8)"
 
 - leafletOsmId: "HOT"
   code: "H"
@@ -70,3 +75,4 @@
       osm_france_link:
         id: "osm_france"
         href: "https://openstreetmap.fr/"
+  darkFilter: "invert(.9) hue-rotate(180deg)"