Read dark mode filter from custom css property

openstreetmap · Dec 9, 2024 · 7a70881 · 7a70881
1 parent b6e06af
commit 7a70881
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git 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
@@ -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 {