Automatic Dark Mode for Leaflet.js

leaflet-darkmode.md

// 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
**/

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