Apply invert + hue-rotate filter to select layers

openstreetmap · Nov 21, 2024 · c47522c · c47522c
1 parent 9ae6e0b
commit c47522c
Showing 1 changed file with 13 additions and 1 deletion.
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
@@ -502,9 +502,21 @@ body.small-nav {
 }
 
 @include color-mode(dark) {
+  [data-map-layer="cyclosm"],
+  [data-map-layer="cyclemap"],
+  [data-map-layer="tracestracktopo"] {
+    --map-layer-filter: brightness(.8);
+  }
+
+  [data-map-layer="mapnik"],
+  [data-map-layer="transportmap"],
+  [data-map-layer="hot"] {
+    --map-layer-filter: invert(.9) hue-rotate(180deg);
+  }
+
   .leaflet-tile-container .leaflet-tile,
   .mapkey-table-entry td:first-child > * {
-    filter: brightness(.8);
+    filter: var(--map-layer-filter);
   }
 
   .leaflet-container .leaflet-control-attribution a {