OpenStreetMap in dark mode

A quick userContent.css definition to undo the greying:

/* openstreetmap.org */
@media (prefers-color-scheme: dark) {
  #content #map .leaflet-pane .leaflet-tile-container .leaflet-tile, #content #map .mapkey-table-entry td:first-child > * {
    filter: brightness(1.0) !important;
  }
}

The #content #map selectors I added to mimic openstreetmap dot org’s DOM structure. It might still catch some other websites, but would make no difference unless they use brightness filters too.

Quick howto on userContent.css in Firefox here

6 Likes