<p></p>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/kcne/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/kcne">@kcne</a></p>
<blockquote>
<p dir="auto">Would you know which class should be targeted to apply this effect to the map?</p>
</blockquote>
<p dir="auto">I'm not using the latest version of Leaflet, so I don't know if anything has changed, but back then I did this:</p>
<p dir="auto">JS code:</p>
<div class="highlight highlight-source-js" dir="auto"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">mapElementId</span> <span class="pl-c1">=</span> <span class="pl-s">"map"</span><span class="pl-kos">;</span>
<span class="pl-s1">map</span> <span class="pl-c1">=</span> <span class="pl-v">L</span><span class="pl-kos">.</span><span class="pl-en">map</span><span class="pl-kos">(</span><span class="pl-s1">mapElementId</span><span class="pl-kos">,</span>
<span class="pl-kos">{</span>
        <span class="pl-c1">attributionControl</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
        <span class="pl-c1">zoomControl</span>: <span class="pl-c1">false</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-v">L</span><span class="pl-kos">.</span><span class="pl-en">tileLayer</span><span class="pl-kos">(</span><span class="pl-s">'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'</span><span class="pl-kos">,</span>
<span class="pl-kos">{</span>
        <span class="pl-c1">attribution</span>: <span class="pl-s">'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'</span><span class="pl-kos">,</span>
        <span class="pl-c1">className</span>: <span class="pl-s">"map-tiles"</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">addTo</span><span class="pl-kos">(</span><span class="pl-s1">map</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">CSS:</p>
<div class="highlight highlight-source-css" dir="auto"><pre class="notranslate"><span class="pl-c">/* the map container itself */</span>
<span class="pl-kos">#</span><span class="pl-c1">map</span>
{
        <span class="pl-c1">background</span><span class="pl-kos">:</span> <span class="pl-pds"><span class="pl-kos">#</span>1f1f1f</span> <span class="pl-k">!important</span>; <span class="pl-c">/* when !important is added this will be the color of map tiles while they are loading */</span>
}

.<span class="pl-c1">map-tiles</span>
{
        <span class="pl-c1">filter</span><span class="pl-kos">:</span> <span class="pl-en">brightness</span>(<span class="pl-c1">0.6</span>) <span class="pl-en">invert</span>(<span class="pl-c1">1</span>) <span class="pl-en">contrast</span>(<span class="pl-c1">3</span>) <span class="pl-en">hue-rotate</span>(<span class="pl-c1">200<span class="pl-smi">deg</span></span>) <span class="pl-en">saturate</span>(<span class="pl-c1">0.3</span>) <span class="pl-en">brightness</span>(<span class="pl-c1">0.7</span>); <span class="pl-c">/* dark map */</span>
}</pre></div>
<p dir="auto">Another thing you might want to do is changing the color of map controls (you can check my app's code for that) and whatever shapes you draw on the map, you probably need to change their colors too.</p>

<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/issues/2332#issuecomment-2477280730">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLJLXODLQCV6AFJE7RD2AT5ENAVCNFSM6AAAAABRKVPFQOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINZXGI4DANZTGA">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLJDX4UIW4EBXKVJGNT2AT5ENA5CNFSM6AAAAABRKVPFQOWGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTUTVBG5U.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/issues/2332/2477280730</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/issues/2332#issuecomment-2477280730",
"url": "https://github.com/openstreetmap/openstreetmap-website/issues/2332#issuecomment-2477280730",
"name": "View Issue"
},
"description": "View this Issue on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>