Add light/dark mode preference

[elevenchars]

Problem

Browsers do not let you set a per-site dark mode preference. Some users do not want to use the new dark mode.

Description

A toggle similar to the Wikipedia appearance (see below). It should probably be accessible for users who are not logged in, as well.

Screenshots

[DaveF63]

The tile screen didn't need dimming; it makes it difficult to read.

[TurnrDev]

I agree, there needs to be a config option.

[mxdanger]

There should be absolutely no image or map dimming. It just reduces readability.

Just leaving this comment here so an option is NOT created for it. The dimming shouldn’t be a thing.

[nickvet419]

It darkens the map background, which also dims the map. and no option to disable dark mode on the page.

[kartomonkey]

Having a dark menu bar is nice, but simply dimming the map is just not acceptable. Maybe as a first step towards a truly dark mode, but please, please, please make it easy for the user to switch back to light mode.
The toggle is a must!

[tonytechhelp]

We need this option, until the dark mode improves, otherwise the visibility of the map and its use is reduced.

[gravitystorm]

Please keep discussions here related to having an option to enable or disable dark mode. The exact implementation of dark mode for the maps is off-topic for this issue.

[hlfan]

related to having an option to enable or disable dark mode

Just one option? Why not more?

[pnorman]

Some users do not want to use the new dark mode

This would only apply to users who want to use dark mode in general, but not on OSM. Is this a large body of users? Could it be reduced with improvements to dark mode?

[TurnrDev]

Could it be reduced with improvements to dark mode?

For myself, I value the ability to turn off dark mode for individual sites entirely. When working on maps, I often cross reference images, notes and other information, most of which don't have a "dark mode" so the switching back and forth is jarring.

[pnorman]

For myself, I value the ability to turn off dark mode for individual sites entirely. When working on maps, I often cross reference images, notes and other information, most of which don't have a "dark mode" so the switching back and forth is jarring

I would have thought this would result in you turning off dark mode in general. What I'm interested in is why you want dark mode for everything else, but not for OSM.

[Nekzuris]

why you want dark mode for everything else, but not for OSM.

Not only OSM, but maps in general looks bad in dark mode. I have all my apps in dark mode except maps app.
But a darker UI with normal tiles looks nice.

[DaveF63]

What I'm interested in is why you want dark mode for everything else, but not for OSM.

Because it dims the graphic screen!
@gravitystorm is incorrect to perceive "dark mode for the maps is off-topic"
They are determinately intertwined.

I think the obvious needs pointing out - this is on the front of house screen. it's the first thing newcomers see, and when I say "see" I really mean they can't see because it's too dark!

I've thought about this since it's implementation & I'm struggling to comprehend how everybody involved in alpha & beta testing looked at the webpage in front of them & thought, 'yeah, that's a great way to promote OSM to the masses.'

[CrabstickOMalley]

Having a dark menu bar is nice, but simply dimming the map is just not acceptable. Maybe as a first step towards a truly dark mode, but please, please, please make it easy for the user to switch back to light mode. The toggle is a must!

THIS EXACTLY. The menu dark is fine but the map itself should have a control or option or no dimming at all. I'd be happy to have all the rest of the hipsterprogrammerforcedoneverybody Dark Mode but don't DIM THE MAP!?!??

[CrabstickOMalley]

Because it dims the graphic screen! @gravitystorm is incorrect to perceive "dark mode for the maps is off-topic" They are determinately intertwined.

Exactly. That user has declared multiple interrelated microissues with strict "off topic" rules for each which is illogical and impractical. A "non-map-dimming dark mode issues" topic is reasonable but splitting up "how to dim maps when they are dimmed" and "UI for preferences/dimming control" and "whether or not to dim by default" etc. etc. into mini-issues while forbidding mention of any of the other considerations prevents normal and natural discussion of the best holistic solution. Which obviously is to create an easy and obvious user preference/dimming control of some sort instead of ivory tower deciding users should use what programmers think is best for them even if they hate it. Which is where we have ended up with the current lousy situation forced upon us.

[gravitystorm]

@gravitystorm is incorrect to perceive "dark mode for the maps is off-topic"

I want to clarify here that I didn't say that, I said "The exact implementation of dark mode for the maps is off-topic for this issue." What I mean is that it's not the right issue for discussing things like whether brightness(0.8) should be added before or after rotate(180) or which option from #5328 you prefer.

There's a lot of people want to discuss a lot of different aspects of dark mode (like 100 comments per day) so it's important that we don't mix every topic together otherwise nothing actionable will come of it. I know a lot of people don't like this, and would prefer a general discussion about everything all at once, but one of my roles as maintainer is to keep discussions on track towards things being decided and code being written.

[gravitystorm]

As for preferences, I'd like to hear from people what kind of preferences they would like to see. So far, across multiple different threads, I've seen the following:

• Automatic / Light (always) / Dark (always)
• Should this be stored per-user or per-browser (e.g. someone wants dark-always on their laptop but automatic on their phone)
• Should the map be controlled separately from the rest of the site UI
• Should each layer of the map be controlled separately (e.g. show dark mode for one layer but light mode for another)

[pkrasicki]

Here's a simple UI proposal:

Dark theme toggle depends on system settings (just like now), but user can override it by pressing the toggle button in top left corner. The setting will be remembered in local storage. The map theme is set to Auto by default, which means it follows website's theme. But users can override that by selecting Light or Dark (it's for the whole map, it's not per layer).

[hlfan]

Adding onto @pkrasicki's proposal:
Modern CSS could even skip the body class:

.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.

[hlfan]

If that setting is stored in a cookie instead of in localStorage the server can already set the theme to avoid flashbanging users reloading the site (e.g. to see how their edits show up), as this would probably come rather late in the packaged js.

[omcnoe]

The solution to dark mode for the tiles isn't to dim the light mode tiles.

It's to design and develop a dark version of the standard tile theme. This is approach taken by Google Maps and Apple Maps.

[hlfan]

However, for OSM's most prominent raster map, Carto, this isn't planned, as it's considered out of scope. gravitystorm/openstreetmap-carto#5044 (comment)

[AndrewKvalheim]

It’s unfortunate that a website has to consider implementing this at all. Ideally it could just respect prefers-color-scheme and let the browser handle asking/remembering your preference.