Skip to content

Instantly share code, notes, and snippets.

@BrendonKoz
Last active September 25, 2024 19:25
Show Gist options
  • Save BrendonKoz/b1df234fe3ee388b402cd8e98f7eedbd to your computer and use it in GitHub Desktop.
Save BrendonKoz/b1df234fe3ee388b402cd8e98f7eedbd to your computer and use it in GitHub Desktop.
Automatic Dark Mode for Leaflet.js
// Leaflet JS - note the *className* attribute
// [...]

L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    className: 'map-tiles'
}).addTo(map);

// [...]
/* Only the necessary CSS shown */

:root {
    --map-tiles-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
}

@media (prefers-color-scheme: dark) {
    .map-tiles {
        filter:var(--map-tiles-filter, none);
	}
}

/** The non-dark mode map will be untouched since it's not styled. **/
/**
    Source: https://github.com/pkrasicki/issviewer
    Discovered via: https://github.com/openstreetmap/openstreetmap-website/issues/2332
**/
@carloskim123
Copy link

works for me too thanks

@fitsum
Copy link

fitsum commented Aug 21, 2024

hits the spot, can worth with this. thank you 🤙🏾

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment