<p>This PR offers an alternative approach to browser dark mode, noted by <a class="user-mention" data-hovercard-type="user" data-hovercard-url="/users/fishcharlie/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/fishcharlie">@fishcharlie</a> 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> and initially implemented by <a class="user-mention" data-hovercard-type="user" data-hovercard-url="/users/bezdna/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/bezdna">@bezdna</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="563980126" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/2532" data-hovercard-type="pull_request" data-hovercard-url="/openstreetmap/openstreetmap-website/pull/2532/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/pull/2532">#2532</a>. Before I spend more than a few hours on this, I’m seeking feedback on an approach that accommodates <a class="user-mention" data-hovercard-type="user" data-hovercard-url="/users/gravitystorm/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/gravitystorm">@gravitystorm</a>’s notes on the prior PR:</p>
<blockquote>
<p>… having lots of overrides and !important flags and so on is fine when a user style is the only available option. But that's not a good approach when we have full control over the CSS sent to the user. … To implement a dark mode, I would ideally like to see out-of-the-box support from bootstrap itself. If that's not available, then maybe 10-20 lines of code to set some colour variables, but little more than that. – <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="563980126" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/2532" data-hovercard-type="pull_request" data-hovercard-url="/openstreetmap/openstreetmap-website/pull/2532/hovercard?comment_id=588163551&comment_type=issue_comment" href="https://github.com/openstreetmap/openstreetmap-website/pull/2532#issuecomment-588163551">#2532 (comment)</a></p>
</blockquote>
<p>The alternative implementation here defines <code>*-color</code> and <code>*-invcolor</code> parameters as suggested though they’re somewhat duplicative because <code>common.scss</code> had a large number of bare color literals. I migrated all of these to the parameters file without attempting to interpret their meaning. To support dynamic color mode switching these are referenced in media queries near the default definition of each class. Example:</p>
<pre><code>body {
font-family: 'Helvetica Neue',Arial,sans-serif;
font-size: $typeheight;
line-height: 1.6666;
color: $common-body-color;
background-color: $common-body-background-color;
margin: 0px;
padding: 0px;
text-align: left;
height: 100%;
}
@media (prefers-color-scheme:dark)
{
body {
color: $common-body-invcolor;
background-color: $common-body-background-invcolor;
}
}
</code></pre>
<p>I’m also interested in help from anyone who’d like to collaborate on this PR to make it suitable for use! Some sample items left to be done are:</p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Invert or adjust map colors per <a class="user-mention" data-hovercard-type="user" data-hovercard-url="/users/pkrasicki/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/pkrasicki">@pkrasicki</a>’s suggestion – <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=727266980&comment_type=issue_comment" href="https://github.com/openstreetmap/openstreetmap-website/issues/2332#issuecomment-727266980">#2332 (comment)</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Figure out why <code>.dropdown-menu</code> is not yet working</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Decide on visual approach for map toolbar</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Update custom CSS on pages like <code>/help</code> and <code>/about</code></li>
</ul>
<p>Here’s a short video showing how this implementation of dark mode behaves.</p>
<details open="" class="details-reset border rounded-2">
<summary class="px-3 py-2 border-bottom">
<svg class="octicon octicon-device-camera-video" height="16" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path fill-rule="evenodd" d="M16 3.75a.75.75 0 00-1.136-.643L11 5.425V4.75A1.75 1.75 0 009.25 3h-7.5A1.75 1.75 0 000 4.75v6.5C0 12.216.784 13 1.75 13h7.5A1.75 1.75 0 0011 11.25v-.675l3.864 2.318A.75.75 0 0016 12.25v-8.5zm-5 5.075l3.5 2.1v-5.85l-3.5 2.1v1.65zM9.5 6.75v-2a.25.25 0 00-.25-.25h-7.5a.25.25 0 00-.25.25v6.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-4.5z"></path></svg>
<span aria-label="Video description darkmode.mov" class="m-1">darkmode.mov</span>
<span class="dropdown-caret"></span>
</summary>
<video src="https://user-images.githubusercontent.com/58730/103447801-daf66500-4c44-11eb-9d9d-b175c9ec046d.mov" controls="controls" muted="muted" class="d-block rounded-bottom-2 width-fit" style="max-height:640px;">
</video>
</details>
<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/3028'>https://github.com/openstreetmap/openstreetmap-website/pull/3028</a></p>
<h4>Commit Summary</h4>
<ul>
<li>Moved all CSS color literals into parameters.scss variable definitions</li>
<li>Moved remaining CSS color names into parameters.scss variable definitions</li>
<li>Renamed remaining color variables to include "-color" suffix</li>
<li>Added media queries with in -invcolor usage for dark mode</li>
<li>Defined all -invcolor variables</li>
<li>Redefined all -invcolor variables</li>
</ul>
<h4>File Changes</h4>
<ul>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/3028/files#diff-e86a39e6d0b163f152db8843fc7d647a3f5d648de4a74f1732bef4474b6e5bc8">app/assets/stylesheets/common.scss</a>
(992)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/3028/files#diff-d2e82deee467e04b34fde66bc330f96ed2020aefc541445c1d576a56612ee71b">app/assets/stylesheets/parameters.scss</a>
(160)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/3028/files#diff-36cb6f6a96bd17245015054b8dd909f30dc3c5c1d741f71e5a810a79d3234381">app/assets/stylesheets/small.scss</a>
(24)
</li>
</ul>
<h4>Patch Links:</h4>
<ul>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/3028.patch'>https://github.com/openstreetmap/openstreetmap-website/pull/3028.patch</a></li>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/3028.diff'>https://github.com/openstreetmap/openstreetmap-website/pull/3028.diff</a></li>
</ul>
<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />You are receiving this because you are subscribed to this thread.<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/3028">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLKLZX2BHKTKU3WL33DSXZKH5ANCNFSM4VQTNSCA">unsubscribe</a>.<img src="https://github.com/notifications/beacon/AAK2OLPGS3CLGJVKX3UPNLLSXZKH5A5CNFSM4VQTNSCKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4LSVXI5A.gif" height="1" width="1" alt="" /></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/pull/3028",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/3028",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>