<p></p>
<p><b>@tomhughes</b> requested changes on this pull request.</p>

<p dir="auto">As it stands this only works correctly for the transport layer that has a dark variant - for all other layers it disables the filtering when in dark mode.</p><hr>

<p>In <a href="https://github.com/openstreetmap/openstreetmap-website/pull/5426#discussion_r1899509199">app/assets/javascripts/leaflet.layers.js</a>:</p>
<pre style='color:#555'>> @@ -31,6 +31,9 @@ L.OSM.layers = function (options) {
         var miniMap = L.map(mapContainer[0], { attributionControl: false, zoomControl: false, keyboard: false })
           .addLayer(new layer.constructor(layer.options));
 
+        if (layer.options.schemeClass) miniMap.getPane("tilePane").classList.add(layer.options.schemeClass);
+        miniMap.getPane("tilePane").style.setProperty("--dark-mode-map-filter", layer.options.filter || "none");
</pre>
<p dir="auto">There is no layer that has a <code class="notranslate">filter</code> option now so this just always removes the filter, plus we don't want to be editing the style anyway as we're trying to get away from using inline styles.</p>
<p dir="auto">What this should do is change the style rules at <a href="https://github.com/openstreetmap/openstreetmap-website/blob/e0f30303538df66b25e6e7840d2534f57f44f27f/app/assets/stylesheets/common.scss#L518">https://github.com/openstreetmap/openstreetmap-website/blob/e0f30303538df66b25e6e7840d2534f57f44f27f/app/assets/stylesheets/common.scss#L518</a> to avoid filtering when the map has the <code class="notranslate">dark</code> class applied.</p>

<hr>

<p>In <a href="https://github.com/openstreetmap/openstreetmap-website/pull/5426#discussion_r1899509670">app/assets/javascripts/leaflet.map.js</a>:</p>
<pre style='color:#555'>> @@ -52,9 +55,14 @@ L.OSM.Map = L.Map.extend({
       code: "G"
     });
 
-    this.on("layeradd", function (event) {
-      if (this.baseLayers.indexOf(event.layer) >= 0) {
-        this.setMaxZoom(event.layer.options.maxZoom);
+    this.on("layeradd", function ({ layer }) {
+      if (this.baseLayers.indexOf(layer) < 0) return;
+      this.setMaxZoom(layer.options.maxZoom);
+      const container = layer.getContainer();
+      if (layer.options.schemeClass) container.classList.add(layer.options.schemeClass);
+      for (let filterReceiver of [container, document.querySelector(".key-ui")]) {
+        if (!filterReceiver) continue;
+        filterReceiver.style.setProperty("--dark-mode-map-filter", layer.options.filter || "none");
</pre>
<p dir="auto">The same thing applies here - we should be making the style look at the class instead of modifying the style inline in a way that doesn't even work.</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/pull/5426#pullrequestreview-2525528372">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLI3VOCC4ALTZY4HLHL2IE3U5AVCNFSM6AAAAABT7CQ4MWVHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZDKMRVGUZDQMZXGI">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLL3IXOKXSJ4MIAJTI32IE3U5A5CNFSM6AAAAABT7CQ4MWWGG33NNVSW45C7OR4XAZNRKB2WY3CSMVYXKZLTORJGK5TJMV32UY3PNVWWK3TUL5UWJTUWRCATI.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/pull/5426/review/2525528372</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/pull/5426#pullrequestreview-2525528372",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/5426#pullrequestreview-2525528372",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>