Dark Mode

[fishcharlie]

The CSS prefers-color-scheme media query allows for users to use dark mode with websites. Although the browser adoption is still low now, I assume it will jump quite a bit when Chrome 76 and iOS 13 are released later this year.

OpenStreetMap should adopt this new standard and allow for dark mode on the website.

[tomhughes]

Are you volunteering to do it?

Only we don't really have anybody with CSS or design skills so it is unlikely to happen unless somebody steps up to do the work.

[dieterdreist]

sent from a phone

On 28. Jul 2019, at 07:04, Charlie Fish ***@***.***> wrote: OpenStreetMap should adopt this new standard and allow for dark mode on the website.

particularly for the map this would require an alternative rendering style and additional tiles, right?

[tomhughes]

No idea but I guess if you took it to an extreme then yes - that is not likely to happen until vector rendering is in use for sure!

[fishcharlie]

Are you volunteering to do it?

I could for sure look into it and see what I can do. I haven't really looked at this codebase before. But sure, I can volunteer some time to it, not sure how far I'll get tho. Also fair warning: I'm not the best at design and color choices either. But I know enough about CSS to at least get the ball rolling maybe.

---

In terms of vector rendering, I think that would be nice for this project. Is that something that is going to happen soon? Maybe this is something we could do in stages? Have dark mode for the majority of the site, and wait for vector rendering for enabling dark mode on the map itself?

---

If I were to work on this, is it something that has enough support to be accomplished? I just don't wanna spend a lot of time working on it, and then it's decided that it's a bad idea and shouldn't be implemented. I understand that the changes made have to be approved and all that. But from a high level perspective, is it something that has enough support to be worked on without it being a total waste?

[mmd-osm]

Maybe you should try the following user script first: https://userstyles.org/styles/173774/openstreetmap-dark-theme and see how it goes (as reported in http://www.weeklyosm.eu/en/archives/12261/)

[tomhughes]

Everybody wants vector rendering but so far nobody is doing the work to make it happen.

As to everything else, it doesn't interest me, but if it can be done without creating a massive maintenance headache then I have no objection to it.

Weirdly it might be easier to send different stylesheets rather than have CSS rules that match on a selector because that way you could just have some variables in the SCSS source that are defined differently for light vs dark mode rather than having to have dark versions of lots of rules. No idea if that is possible though.

[vitaly-zdanevich]

I can implement prefers-color-scheme for website, MVP: for header only. Please approve me and I will do it, for this first pull request it must be only a few lines of CSS.

[bezdna]

#2532

[gravitystorm]

I'll repeat some guidance I gave on #2532 here:

To implement a dark mode, I would ideally like to see out-of-the-box support from bootstrap itself. If that's not available, then maybe 10-20 lines of code to set some colour variables, but little more than that. Anything more complex will be too much to maintain for a low-priority feature like this.

[vitaly-zdanevich]

Issue of Bootstrap twbs/bootstrap#27514

[vinorodrigues]

See vinorodrigues/bootstrap-dark for some ideas on how to do this.

[pkrasicki]

This would be a nice feature, but it doesn't make much sense to implement this, unless the map's colors can be changed to dark mode too. Bright colors of the map will ruin the effect. I'm having the same issue in my own app that uses OpenStreetMap. Is there a way to change the map's colors to make it dark? Without it dark mode can't happen, unless you want to add it for the docs or the blog.

[HolgerJeromin]

Is there a way to change the map's colors to make it dark?

That would be a complete new style.
Thunderforst Transport map has a dark variant:
https://www.thunderforest.com/maps/transport-dark/

[pkrasicki]

Would it be possible for openstreetmap.org to provide a dark map?

[tomhughes]

Not at the moment, no. Not unless somebody has a suitable layer they want to propose through the normal process.

[zopsicle]

Perhaps you can use filter: invert(100%); on the map tiles with CSS. It may not look the prettiest but it works.

[pkrasicki]

Invert just by itself looks ugly, but you inspired me to play with other properties and I got this:

Before:

After:

Code:
filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);

[dieterdreist]

this is quite interesting. It is rendered differently on different engines though. This is on mac, Firefox and on Safari:

[pkrasicki]

I used this solution for dark theme in my app, you can test it here. Full source here. I think it works pretty well in practice. Perhaps openstreetmap.org could do this too?

With Leaflet it's possible to apply a custom CSS class with the filter just to the map tiles themselves and that's what I did. This way it doesn't affect whatever you draw on the map. One other problem that I had to solve was that map tiles were too bright when they were loading - they had a light gray color.

The solution was to simply change the background color of the map element:
background: #1f1f1f !important;

There is only one problem left. Since I applied the filter only to map tiles, the map controls still have the default white color. I haven't figured out how to apply a custom class for the controls in Leaflet yet.

[HolgerJeromin]

There is only one problem left. Since I applied the filter only to map tiles, the map controls still have the default white color. I haven't figured out how to apply a custom class for the controls in Leaflet yet.

We do not use the leaflet controls here. So this would be no problem for this repo

[pkrasicki]

It looks like you use the Leaflet's attribution control in bottom right corner.

[dieterdreist]

sent from a phone

On 1. Dec 2020, at 15:46, pkrasicki ***@***.***> wrote: There is only one problem left. Since I applied the filter only to map tiles, the map controls still have the default white color. I haven't figured out how to apply a custom class for the controls in Leaflet yet.

you could add a custom class to the page body or the map and have different css accordingly (body.dark .zoom-button) etc.

[pkrasicki]

I had issues with that, so I did this instead:

let attrib = L.control.attribution({prefix: ""});
attrib.addTo(map);
attrib.getContainer().classList.add("map-attribution");

let zoom = L.control.zoom({});
zoom.addTo(map);
zoom.getContainer().classList.add("map-zoom");

[HolgerJeromin]

Just as an info for dark mode users:
You can now select dark/light/system for Github website in your Github settings. (will default to system when out of beta)

[vitaly-zdanevich]

Thank you @HolgerJeromin, the direct link: https://github.com/settings/appearance

[krjan02]

Code:
filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);

i actually like this more:

invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)

[MarcGodard]

I think these filters work perfectly, why is this still open?

[danieldegroot2]

Presumably it's a little easier to enable dark mode for these auxiliary pages rather than the main map?

@Caseyb87 Fyi the community forums have (different software and) substantially larger, experienced, paid organization (Discourse, not OSMF) and volunteer developer community behind it.

See #2332 (comment)

tldr; this website relies mostly on volunteers.

( How you can help review pull requests )

[iamjacob]

Perhaps you can use filter: invert(100%); on the map tiles with CSS. It may not look the prettiest but it works.

filter: grayscale(1) invert(1);

Thanks for the hint!!! Add grayscale too and it looks fantastisc!!!!

[kcne]

I've been exploring these updates, and with Bootstrap 5.3 now in use, I believe we can implement them with minimal code adjustments.

• Refactor the background color for content-heading to use theme colors instead of a standard color variable

This seems to be working fine locally, so I assume it’s already been addressed.

• Refactor our table striping override

Tables could benefit from some additional styling adjustments to better align with the overall UI appearance in dark mode. I’d be happy to dive deeper into this and prepare a PR. Here’s how the notes table currently appears:

I also reviewed other pages across the site, and so far, everything else seems consistent.

I tried applying the suggested filter styling to the map, but I couldn't locate the correct class in the code. For reference, here’s the suggested style:

invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)

@krjan02 @pkrasicki Would you know which class should be targeted to apply this effect to the map?

If we’re aligned on this approach, I'm keen to open a PR for this. Additionally, would you be interested in styling the map with this filter as mentioned in the comments or perhaps adding a dropdown with options like dark mode (UI), dark mode (UI + map), and default mode?
@tomhughes @AntonKhorev @gravitystorm

Additional Screenshots

[AntonKhorev]

I believe we can implement them with minimal code adjustments.

#4761

Tables could benefit from some additional styling adjustments to better align with the overall UI appearance in dark mode. I’d be happy to dive deeper into this and prepare a PR. Here’s how the notes table currently appears

This is "blue on blue" thing I talked about previously, one of the reasons for #5269

I tried applying the suggested filter styling to the map, but I couldn't locate the correct class in the code.

#4777

[kcne]

Great work, thank you. I will take a look at PRs mentioned, in the meantime if you need help with any of these I'm happy to jump in.

[pkrasicki]

@kcne

Would you know which class should be targeted to apply this effect to the map?

I'm not using the latest version of Leaflet, so I don't know if anything has changed, but back then I did this:

JS code:

const mapElementId = "map";
map = L.map(mapElementId,
{
	attributionControl: false,
	zoomControl: false
});

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
	attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
	className: "map-tiles"
}).addTo(map);

CSS:

/* the map container itself */
#map
{
	background: #1f1f1f !important; /* when !important is added this will be the color of map tiles while they are loading */
}

.map-tiles
{
	filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7); /* dark map */
}

Another thing you might want to do is changing the color of map controls (you can check my app's code for that) and whatever shapes you draw on the map, you probably need to change their colors too.

[shibotto]

Can the light/dark/follow system style be made as a user preference? I like what Dark Reader is doing way more, but it only works with light as a base style.

[tomFlowee]

This seems to have been rolled out on the main website.

At least, the main website has some css trick to make the tiles darker on my firefox on desktop.

The unfortunate downside of this solution is that I can't use the website anymore. The contrast is too low, the text in the tiles has become unreadable, the features of the map are hardly visible.
The point of dark mode is not to make everything darker, this seems to be the effect gained but that is the opposite of what people that use dark mode actually want.
The entire point of dark mode is to increase contrast, this is gained by having light text on dark background.

The current iteration of openstreetmap.org is unusable due to extremely low contrast. Please consider reverting until a better solution can be found.

[tomFlowee]

For what it is worth, as someone that loves dark mode and even has an AMOLED display that makes a pure black background very easy on the eyes,
for someone that is a fan of dark mode, I don't want my normal map usage to have tiles that have a dark background.

Only while driving I like having dark background with white street/city names, for a map that has very low amount of detail. But for normal usage, which is 100% of what I'd do on OSm.org, I don't want my tiles to be anything other than the beautiful color-theme that the site has shipped for years.

This "feauture" should at minimum be opt-in.

[scy]

As an alternative to reverting, I have created PR #5325 as a quick fix that basically uses one of the filters from this issue.

[mxdanger]

I really hope the dim filter over the map is removed. Either have a proper dark tile map or just don’t touch it at all. It just looks terribly washed out.

Would have been a perfect dark mode launch if not ruined by the unnecessary map CSS filter.

[JaffaKetchup]

Agreed, the current darkened map does not look great, especially as iD does not yet support dark mode at all, and so there's a bit of a jump on editing.

Maybe some layers can be changed for dark mode? Whilst I usually agree that I don't like dark mode maps, I make an exception for Tracestrack's Dark 3 raster/vector variant (https://console.tracestrack.com/explorer), since it keeps the sea blue and the land green IYSWIM. Thunderforest's Transport Dark is also OK IMO (https://www.thunderforest.com/maps/transport-dark/).
Would be good to make the UI dark mode toggleable, as well as the map layer dark modes togglable (and have the option to use light mode maps even in UI dark mode) - but that's possibly overcomplicated.

[Dr-Mx]

As an alternative to reverting, I have created PR #5325 as a quick fix that basically uses one of the filters from this issue.

Please be aware of the performance issues with adding multiple css filters, old hardware will struggle.

[AntonKhorev]

The entire point of dark mode is to increase contrast

Not everyone seems to agree with this. For example, here on Github the comments have higher contrast in dark mode. But text Bootstrap standard colors which is used on the osm website has lower contrast. (as reported by Chrome dev tools)

[gravitystorm]

This issue has always struggled to be actionable, since there are at least 3 different topics to consider:

• Dark mode for the UI, and how to implement the colour choices
• Dark mode for the maps, and how to implement the colour choices
• Dark mode in general, and how to implement the switching between modes

We've now implement dark mode for the UI, and for the maps, and automatic switching between modes, but each of these topics can still be improved and it's now better that they are discussed separately. Here are three relevant issues:

• Dark Mode bugs/improvements for the UI #5329
• Dark Mode for maps #5328
• Add light/dark mode preference #5324

It will help us all enormously if you can continue the discussions in the relevant issues, and please stay on topic for each one.

[AntonKhorev]

Also

• dark mode because the user likes dark ui in normal lighting conditions vs dark mode because it's actually dark

[pkrasicki]

This issue has always struggled to be actionable, since there are at least 3 different topics to consider

It failed to be actionable, because developers have rejected PRs and suggestions from contributors. Now they've completely ignored our proposed solution for a dark map and went with something else that's difficult to read. We've been talking about the map issue for 4 years. Now you're closing the issue and we're supposed to start over? The solution is literally just a few lines of CSS that's already been tested by me and others.

[gravitystorm]

The solution is literally just a few lines of CSS that's already been tested by me and others.

I put a reasonable amount of effort into the description of the options for the maps at #5328 (and also #4769, six months ago).

Please read the options, their pros and cons, and the followup comments, and have a think about the situation in a bit more depth. Your comment was quite dismissive and unhelpful.

[pkrasicki]

In that issue you're not talking about our specific ideas for filters, you didn't show screenshots or said how to test them. You are just discussing different approaches. Option 1 is do nothing. Option 2 is your workaround that you've just implemented. Option 3 is our workaround. Option 4 is the proper solution (or at least that's how I see it), which is great, but if we could easily do that, we wouldn't need those temporary workarounds.

Some of your criticism of our workaround is that This can lead to perceptual contrast problems or Can have unexpected effects for shadows (e.g. hillshading or building shadows). You could show us those problems in practice with a specific filter so that we can try and improve it. I know those filters aren't perfect, but right now it feels like our ideas were almost completely ignored. You're not discussing our specific solutions.

[saxbophone]

Hi, the latest change to OSM regarding this has actually made it much harder for me to use because of how low-contrast the map now is. I would actually say, in my opinion it would be more preferable from an accessibility POV to not honour the user's dark mode preferences than it would be to show a low-contrast map like this.

[jliebers]

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:

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

[dieterdreist]

this will work to restore the light mode map, but it will also stop saving your eyes ;-)

[tomFlowee]

this will work to restore the light mode map, but it will also stop saving your eyes ;-)

I'm for one happy with the hack as it actually saves my eyes. Not sure why you have the opposite experience. Looking at the OSM map before this css hack is painful, being forced to make out details in a low contrast map is very tiring to the eyes.