// Leaflet JS - note the *className* attribute
// [...]
L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
attribution: '© <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
**/
works for me too thanks