<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" integrity="sha512-Zcn6bjR/8RZbLEpLIeOwNtzREBAJnUKESxces60Mpoj+2okopSAcSUIUOseddDm0cxnGQzxIR7vJgsLZbdLE3w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js" integrity="sha512-puJW3E/qXDqYp9IfhAI54BJEaWIfloJ7JWs7OeD5i6ruC9JZL1gERT1wjtwXFlh7CjE7ZJ+/vcRZRkIYIb6p4g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="dark-map-wrapper">
  <div id="map-dark"></div>
  <div class="overlay-text">Night Mode</div>
</div>

* { box-sizing: border-box; }
body {
  margin: 0;
  background: #111;
  font-family: system-ui, "Segoe UI", sans-serif;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dark-map-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #333;
}

#map-dark {
  height: 450px;
  width: 100%;
  background: #242424;
}

.leaflet-layer, 
.leaflet-control-zoom-in, 
.leaflet-control-zoom-out,
.leaflet-control-attribution {
  filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

.overlay-text {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 0.85rem;
  z-index: 500;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.1);
}

const map = L.map("map-dark").setView([40.7128, -74.0060], 13);

L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
  maxZoom: 19,
  attribution: "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a>"
}).addTo(map);

L.marker([40.7128, -74.0060]).addTo(map)
  .bindPopup("<b>Dark Mode</b><br>CSS Filters make this easy.")
  .openPopup();

Back to Snippets

Dark Mode OpenStreetMap CSS

Integrate a stunning dark mode map into your application without paying for premium tile providers. We use CSS filters to invert the standard OpenStreetMap tiles, which creates a sleek night-time look instantly.

531

#javascript

#css

#openstreetmap

#dark mode

#map theme

#filter

#invert

#ui

/HTML *CSS ()JS Output Live Updates

Dark Mode OpenStreetMap CSS

Share Code Snippet