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 notifications@github.com 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]

https://github.com/openstreetmap/openstreetmap-website/pull/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 https://github.com/twbs/bootstrap/issues/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 notifications@github.com 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?

[HolgerJeromin]

I think these filters work perfectly,

Probable not. How do we manage feedback like "this feature looks not good in dark mode tile"?

why is this still open?

Because no one has build and merged a PR with this change. Feel free to implement all needed changes (best with opt in). No changes in this repo is created by paid staff!

[pkrasicki]

@MarcGodard

why is this still open

Because (looking from the outside) the dev team can't agree on a solution that could be implemented right now. There have been PRs implementing dark theme for the site itself and all of them were rejected (correct me if I'm wrong). The solutions we have available right now probably aren't perfect, but we could use them and solve this problem. It wouldn't be perfect, but it wouldn't look bad either and would be usable.

[fluttermoonger]

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.

I can help you out and make it happen.

[thorizer]

The solution should not only work on the web, I'm using flutter

[HolgerJeromin]

The solution should not only work on the web, I'm using flutter

Than you need the css in the flutter code...

[fluttermoonger]

The solution should not only work on the web, I'm using flutter

Than you need the css in the flutter code...

I also use Flutter so using css In flutter should not be an issue.

[gravitystorm]

I experimented today with using Bootstrap 5.3 built-in support for colour modes. Here's a couple of screenshots for what it currently looks like:

This was a one-line change to turn on dark mode (data-bs-theme="dark" on <html>), and is just a PoC (no automatic UA-driven switching etc). It also shows that more work needs to be done first, such as:

• refactor how we define the background color for the content-heading so that it is driven by theme colours rather than a standard colour variable
• refactor our override of the table striping
• ... I'm sure there's many other parts of the site that will need refactoring to fully work too.

We aren't even on bootstrap 5.3 yet, this was just while I was testing some other upgrades. But since colour themes are built into newer versions of bootstrap, this is definitely the way forward for implementing dark mode.

[AntonKhorev]

I'm sure there's many other parts of the site that will need refactoring to fully work too.

I'm sure it's a few custom properties for colors inside a media query.

[nc011]

Just to note that the Community Forums support dark mode (I think natively through discourse) which results in quite a jarring experience when logging in as https://www.openstreetmap.org/login doesn't support dark mode.

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

[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 https://github.com/openstreetmap/openstreetmap-website/issues/2332#issuecomment-515738760

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)