[openstreetmap/openstreetmap-website] Dark Mode (#2332)

[pkrasicki]

@kcne

>Would you know which class should be targeted to apply this effect to the map?

I'm not using the latest version of Leaflet, so I don't know if anything has changed, but back then I did this:

JS code:
```js
const mapElementId = "map";
map = L.map(mapElementId,
{
	attributionControl: false,
	zoomControl: false
});

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

CSS:
```css
/* the map container itself */
#map
{
	background: #1f1f1f !important; /* when !important is added this will be the color of map tiles while they are loading */
}

.map-tiles
{
	filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7); /* dark map */
}
```

Another thing you might want to do is changing the color of map controls (you can check my app's code for that) and whatever shapes you draw on the map, you probably need to change their colors too.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/issues/2332#issuecomment-2477280730
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/issues/2332/2477280730 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20241114/1b47cf0e/attachment-0001.htm>