[openstreetmap/openstreetmap-website] Dark Mode for maps (Issue #5328)

[Marwin Hochfelsner]

I've looked at a few options for dimming and inverting involving SVG filters.
| no filter | current | heavy | gamma |
|-|-|-|-|
| ![www openstreetmap org_](https://github.com/user-attachments/assets/524b5a47-a264-43d0-a1b7-5710592807dc) | ![www openstreetmap org_ (1)](https://github.com/user-attachments/assets/91240fb7-efae-4d85-bdd1-85ab6e50ae2a) | ![www openstreetmap org_ (2)](https://github.com/user-attachments/assets/37e5772f-a2fd-4b8f-9418-293f1f013a89) | ![www openstreetmap org_ (3)](https://github.com/user-attachments/assets/6256f89b-a759-486c-a265-d932dd9846ac) |
| ![www openstreetmap org_ (4)](https://github.com/user-attachments/assets/431d5a65-2e92-449f-a98d-4527fb112eaa) | ![www openstreetmap org_ (5)](https://github.com/user-attachments/assets/aaeba012-9c4c-4ae4-9052-2e173e9bdf53) | ![www openstreetmap org_ (6)](https://github.com/user-attachments/assets/061022ad-29da-4378-9ed4-3e595005b73d) | ![www openstreetmap org_ (7)](https://github.com/user-attachments/assets/61764955-2c7b-4489-8b30-f80c4a6e4a1d) |

As expected, dimming with gamma yields a more natural result. While the gamma dim struggles a bit with the hill-shaded regions, the "heavy" `brightness(0.55) contrast(1.75)` combo obliterates them. You can see how gamma trades contrast in dark areas for contrast in light areas.
The filter for the gamma dimming in `url(#gamma)contrast(95%)` is written like this:
```svg
<filter id="gamma" color-interpolation-filters="linearRGB">
	<feComponentTransfer>
		<feFuncR type="gamma" exponent="2"></feFuncR>
		<feFuncG type="gamma" exponent="2"></feFuncG>
		<feFuncB type="gamma" exponent="2"></feFuncB>
		<feFuncA></feFuncA>
	</feComponentTransfer>
</filter>
```
---
| no filter | standard | transformed | blended |
|-|-|-|-|
| ![www openstreetmap org_](https://github.com/user-attachments/assets/524b5a47-a264-43d0-a1b7-5710592807dc) | ![www openstreetmap org_ (8)](https://github.com/user-attachments/assets/0d06f322-4a4f-46d0-aad9-9215a955436a) | ![www openstreetmap org_ (9)](https://github.com/user-attachments/assets/5bc1ffb5-4958-4208-9956-1148561f29e4) | ![www openstreetmap org_ (10)](https://github.com/user-attachments/assets/f5f6f11d-e3a4-4071-a030-5db197e198ae) |
| ![www openstreetmap org_ (11)](https://github.com/user-attachments/assets/93a86cdb-74ae-4375-85e2-46534b356646) | ![www openstreetmap org_ (12)](https://github.com/user-attachments/assets/20ee573a-c38f-4bfe-b55e-c62ba8baee4a) | ![www openstreetmap org_ (13)](https://github.com/user-attachments/assets/ef25f0f3-a946-42eb-be66-a2f5d3abb0dd) | ![www openstreetmap org_ (14)](https://github.com/user-attachments/assets/cd7d016f-0516-4578-b765-bee9cdc2483f) |

Moving on to inverting, the `invert(95%)hue-rotate(180deg)` filter is the one that seems the most natural to me. The one featured in the previously mentioned article desaturates and brightens the background too much and, therefore, loses contrast, even with a gamma of only 0.15. Another I built on blending modes does this too, but with way more saturation (I already turned it down to 50% with `saturate(0.5)url(#invert-blend)`).
```css
<filter id="invert-transform" color-interpolation-filters="linearRGB">
	<feComponentTransfer>
		<feFuncR type="gamma" exponent="0.15"></feFuncR>
		<feFuncG type="gamma" exponent="0.15"></feFuncG>
		<feFuncB type="gamma" exponent="0.15"></feFuncB>
		<feFuncA type="gamma"></feFuncA>
	</feComponentTransfer>
	<feColorMatrix type="matrix" values="0.4 -0.7 -0.7 0 1 -0.7 0.4 -0.7 0 1 -0.7 -0.7 0.4 0 1 0 0 0 1 0"></feColorMatrix>
</filter>
<filter id="invert-blend">
	<feComponentTransfer>
		<feFuncR type="gamma" exponent="0.2"></feFuncR>
		<feFuncG type="gamma" exponent="0.2"></feFuncG>
		<feFuncB type="gamma" exponent="0.2"></feFuncB>
		<feFuncA type="gamma"></feFuncA>
	</feComponentTransfer><feColorMatrix values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"></feColorMatrix>
	<feBlend mode="color" in="SourceGraphic"></feBlend>
</filter>
```

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

Message ID: <openstreetmap/openstreetmap-website/issues/5328/2481193144 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20241117/e5ef22e9/attachment.htm>