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

[Jonathan Liebers]

Hi all, 

I am very sorry, but I also find that the recent dark mode changes make the map unusable to me. I just cannot perceive important information on tracestrack_topo anymore. My system is set to dark mode because I want to save my eyes. However, it is still important to perceive all relevant information. The latter is, unfortunately, heavily impacted negatively by these changes due to the low contrast of the map tiles. I frequently use openstreetmap.org, but it has become quite painful, and I even have set my system to light mode temporarily to achieve better usability.

Unfortunately, there is no dedicated setting to enforce the light layout on openstreetmap.org. Many websites offer a dedicated button to switch between dark mode and light mode, but I could not find one on openstreetmap.org.

That is why I have created a workaround so that the actual map renders in light mode while the rest of the webpage renders in dark mode. With this, I could effectively resolve my issue and I want to share it with the community.

Workaround Steps:

1. Prerequisite: you must use Firefox browser. I have tested this on version 128.4.0esr (64bit) on Windows 10. I am sorry, my workaround is not developed or tested for Chromium-based browsers; maybe someone can adapt it.
2. Create a `chrome/userContent.css` file in Firefox profile folder and set `toolkit.legacyUserProfileCustomizations.stylesheets` to `true` in `about:config`. Please refer to these seven steps that provide detailed instructions: https://superuser.com/a/319322
3. In `chrome/userContent.css` paste the following:

```
@-moz-document domain("openstreetmap.org") {
    .leaflet-tile {
        filter: brightness(1.0) !important;
        opacity: 1 !important;
    }
}
```

4. Restart Firefox.

Openstreetmap.org should now render in dark mode but the contrast of the actual map should be restored to light mode:

![grafik](https://github.com/user-attachments/assets/5b353121-e82d-473d-801c-a0009e15eb00)

Please use at your own risk, there is no warranty of any kind of this to remain working in the future. 🙂 

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

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