[openstreetmap/openstreetmap-website] Dark Mode (#2332)

pkrasicki notifications at github.com
Tue Dec 1 14:46:58 UTC 2020


I used this solution for dark theme in my app, [you can test it here](https://issviewer.com). [Full source here](https://github.com/pkrasicki/issviewer). 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.
![leaflet-map-tiles-loading](https://user-images.githubusercontent.com/49721209/100754991-9b3d2300-33e3-11eb-8c2c-ae02a990dbd7.png)

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.
![leaflet-controls](https://user-images.githubusercontent.com/49721209/100755164-ca539480-33e3-11eb-9423-a306a67c32a1.png)


-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/issues/2332#issuecomment-736597362
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20201201/9f4c081c/attachment.htm>


More information about the rails-dev mailing list