openstreetmap-website
openstreetmap-website copied to clipboard
openstreetmap
Dark Mode
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.
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.
sent from a phone
On 28. Jul 2019, at 07:04, Charlie Fish [email protected] 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?
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!
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?
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/)
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.
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.
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.
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.
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/
Not at the moment, no. Not unless somebody has a suitable layer they want to propose through the normal process.
Perhaps you can use filter: invert(100%); on the map tiles with CSS. It may not look the prettiest but it works.
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);
this is quite interesting. It is rendered differently on different engines though. This is on mac, Firefox and on Safari:
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.
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
It looks like you use the Leaflet's attribution control in bottom right corner.
sent from a phone
On 1. Dec 2020, at 15:46, pkrasicki [email protected] 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.
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");
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)
Thank you @HolgerJeromin, the direct link: https://github.com/settings/appearance
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%)
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!
@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.
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.
