diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index ead01a8ff8..ad3291789c 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -70,6 +70,8 @@ $(document).ready(function () {
   // See https://turbo.hotwired.dev/reference/drive#turbo.session.drive
   Turbo.session.drive = false;
 
+  $("body").css("--dark-mode-map-filter", "invert(.9) hue-rotate(180deg)");
+
   var headerWidth = 0,
       compactWidth = 0;
 
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 668d050d8b..533405e8fb 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -508,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 {