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

[Andy Allan]

Thanks for your comments. Here is my proposal.

(You can think of this as a hierarchy, where each line is an override for the previous step)

1. We should continue to serve light mode by default.
2. If a browser requests dark mode (through the [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) mechanism) then we should continue to do that.
3. (If browsers start implementing native support for per-site choices then great, that would work too. But it's not available yet for most browsers.)
4. We should add a color-mode preference for the overall UI. It will have three choices: Auto (default) / Light / Dark. This can be used to override the mode that their browser has asked for (i.e. it's useful if your browser asks for dark but you want to see light mode, or vice-versa).
5. We should add a color-mode preference for the maps. It will have three choices: Auto (default) / Light / Dark. By default, the maps will be the same as the UI, based on all the above steps. This preference can be used to override the color-mode just for the maps, so you could e.g. see light mode maps in a dark mode UI, or dark mode maps when using the light mode UI.

Here's some worked examples:
* prefers-color-scheme = dark, UI mode preference = auto, map preference = light: Dark UI with Light Maps
* prefers-color-scheme = not set, UI mode preference = light, map preference = light: Light UI with Light Maps
* prefers-color-scheme = not set, UI mode preference = auto, map preference = auto: Light UI with Light Maps
* prefers-color-scheme = dark, UI mode preference = light, map preference = dark: Light UI with Dark Maps

I hope this is clear and logical. This will allow a reasonable amount of control of how the site looks, respecting the browser settings by default but allowing people to override it if they want to.

At this stage, I'm **not** proposing preferences for the following:

* Per-style preferences. That would allow you to e.g. have dark mode for all maps, except one particular map, which you always want to see in light mode (or vice-versa).
* Global (or Per-style) personal map filter preferences. That would allow you to "pick you own filter" to override the cartography.

The reason that I'm not proposing these preferences right now, is that I'm not sure they are necessary, and I want to make progress and I hope that a more simplified system can be finished and tried out more quickly.

At this stage, I'm also proposing:

* Preferences should be based on your user account.

This matches how github has implemented their preferences, and how we currently handle language preferences. So for example, your preferences would apply to all your own browers/devices, and will only take affect when logged in. Again, this is because I want to simplify the implementation and get it working more quickly.

Now straight away I know that not everyone will be happy with this, and some people will want more preferences or have some use-case where they want dark mode on their phone and light mode on their desktop despite their browser settings or something similar. What I would like is for people to think whether my suggestion is a step in the right direction, and if we can get a rough consensus on that to get started.

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

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