<h3 dir="auto">Description</h3>
<p dir="auto">This is basically a hotfix to address the dark mode rollout from today. I'm new to contributing here and kind of in a hurry, sorry in advance if anything in this PR isn't perfect.</p>
<p dir="auto">The current implementation of dark mode is already pretty good, but the tile display (i.e. the actual map) suffers greatly, since the tiles are simply dimmed using a CSS filter, losing a lot of contrast in the process.</p>
<p dir="auto">I have borrowed the filter designed by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/krjan02/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/krjan02">@krjan02</a> from <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="473706005" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/2332" data-hovercard-type="issue" data-hovercard-url="/openstreetmap/openstreetmap-website/issues/2332/hovercard?comment_id=867821340&comment_type=issue_comment" href="https://github.com/openstreetmap/openstreetmap-website/issues/2332#issuecomment-867821340">#2332 (comment)</a> and basically inserted it into the changes made in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2247180875" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/4712" data-hovercard-type="pull_request" data-hovercard-url="/openstreetmap/openstreetmap-website/pull/4712/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/pull/4712">#4712</a>.</p>
<p dir="auto">Additionally, I have made sure that the tiles are not being filtered twice due to inheriting the filter from their parent element. Maybe selecting <code class="notranslate">.leaflet-tile</code> instead of <code class="notranslate">.leaflet-tile-container</code> would solve that problem, too, but I'm assuming that <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/AntonKhorev/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/AntonKhorev">@AntonKhorev</a> had a reason for targeting the container instead.</p>
<p dir="auto">This is how it would look:</p>
<p dir="auto"><a href="https://github.com/user-attachments/assets/a34b8bed-2b67-49bd-bd61-717dde6fb6d1">image.png (view on web)</a></p>
<p dir="auto">Note that the discussion in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="473706005" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/2332" data-hovercard-type="issue" data-hovercard-url="/openstreetmap/openstreetmap-website/issues/2332/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/issues/2332">#2332</a> is apparently not over yet, and I don't want to preempt this. However, since dark mode rolled out today and I've already seen several people kind of unhappy with the way it looks now (which is made worse by the fact that there's no way to turn it off if your browser is set to prefer dark mode), I wanted to suggest a quick fix.</p>
<h3 dir="auto">How has this been tested?</h3>
<p dir="auto">That's the thing: I have tested this by editing the CSS in the browser developer tools, because I don't want to set up the whole environment for building/running the website locally. As I said, I'm new to this project. I'd appreciate if someone with a working setup could test the changes.</p>
<p dir="auto">However, as you can see in the screenshot, the map key is correctly affected by the filter, as are the previews in the "Map Layers" pane.</p>
<p dir="auto">Also, I'm an experienced developer, but not a front-end dev.</p>

<hr>

<h4>You can view, comment on, or merge this pull request online at:</h4>
<p>  <a href='https://github.com/openstreetmap/openstreetmap-website/pull/5325'>https://github.com/openstreetmap/openstreetmap-website/pull/5325</a></p>

<h4>Commit Summary</h4>
<ul>
  <li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/5325/commits/d46f9d28ed99474c4529d33a282589d0190a47f6" class="commit-link">d46f9d2</a>  Use CSS filter instead of dimming tiles</li>
</ul>

<h4 style="display: inline-block">File Changes </h4> <p style="display: inline-block">(<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5325/files">1 file</a>)</p>
<ul>
  <li>
    <strong>M</strong>
    <a href="https://github.com/openstreetmap/openstreetmap-website/pull/5325/files#diff-e86a39e6d0b163f152db8843fc7d647a3f5d648de4a74f1732bef4474b6e5bc8">app/assets/stylesheets/common.scss</a>
    (8)
  </li>
</ul>

<h4>Patch Links:</h4>
<ul>
  <li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/5325.patch'>https://github.com/openstreetmap/openstreetmap-website/pull/5325.patch</a></li>
  <li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/5325.diff'>https://github.com/openstreetmap/openstreetmap-website/pull/5325.diff</a></li>
</ul>

<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/5325">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLPSXBPAABMC5OBHYLL2AUKPZAVCNFSM6AAAAABRZ3RSY6VHI2DSMVQWIX3LMV43ASLTON2WKOZSGY3DAMJVGA2DGNY">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLOAPSE3FV55CBPVWI32AUKPZA5CNFSM6AAAAABRZ3RSY6WGG33NNVSW45C7OR4XAZNFJFZXG5LFVJRW63LNMVXHIX3JMTHJ5DVMUU.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/5325</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/5325",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/5325",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>