[openstreetmap/openstreetmap-website] Add light/dark mode preference (Issue #5324)

[Marwin Hochfelsner]

Adding onto @pkrasicki's proposal:
Modern CSS could even skip the body class:
```css
.leaflet-tile-pane .leaflet-layer:not(.dark), .mapkey-table-entry td:first-child > * {
	body:has(input[type="radio"][name="filter"][value="light"]:checked) & {
		filter: none;
	}
	body:has(input[type="radio"][name="filter"][value="dim"]:checked) & {
		filter: brightness(80%);
	}
	body:has(input[type="radio"][name="filter"][value="dark"]:checked) & {
		filter: invert(95%)hue-rotate(180deg);
	}
}
```
And yes, this shouldn't be implemented like this, but I like the idea of the simplicity in this.

Notably, this would also ensure usability for non-logged-in users.

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

Message ID: <openstreetmap/openstreetmap-website/issues/5324/2480757188 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20241116/91762874/attachment.htm>