DEV Community

Deepak Devanand
Deepak Devanand

Posted on

Leaflet Map - Dark Theme

Leaflet.js is arguably the best client-side map-rendering library. While there's a plethora of OpenStreet Map tile providers, none of the free basemap layer have a dark-themed map (tiles).

By applying css filter property on specific leaflet classes, we can have a "hacky" dark map.

.leaflet-control-attribution {
  filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
Enter fullscreen mode Exit fullscreen mode
  • invert(100%) completely inverts the color, essentially adding dark background to the map.
  • hue-rotate(180deg) is optional, but converts the predominant blue color (large roads) on the map to red.

Top comments (4)

anthonylzq profile image
Anthony Luzquiños

This is great, thanks!

miralo profile image
Michele Mirandola

Great! Thanks for this snippet! :-)

jamesvanderpump profile image
James Vanderpump

Thanks for sharing, this is so cool!

falselight profile image

Thank you ;-) quickly solution