<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: "© <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();
