This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan
<p>I saw Jeremy Keith's <a href="https://adactio.com/journal/15941">post about adding dark mode to his blog</a> and it seemed simple, so I decided to give it a whirl.</p>
<p>Here is the <a href="https://github.com/PaulKinlan/paul.kinlan.me/compare/00862927187ef8b36433ee59679cb6367a21793a...main">diff of the work</a> for all to see. It was surprisingly easy (outside of silly errors on my part). There was a small refactor to support CSS variables and ensuring I have fallback if there's a browser that doesn't support CSS custom properties, but that is about it. I did pretty much the same thing that Jeremy did.</p>
<p>There was no DevTools support in Chrome that let me emulate dark-mode being set (<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1004246">I hear it's coming</a>), so I created a simple CSS class that I could add to my HTML element to quickly test it working (as seen below).</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-CSS" data-lang="CSS">@<span style="color:#66d9ef">media</span> <span style="color:#f92672">(</span><span style="color:#f92672">prefers-color-scheme</span><span style="color:#f92672">:</span> <span style="color:#f92672">dark</span><span style="color:#f92672">)</span> {
<span style="color:#f92672">html</span> {
--background-color: rgb(<span style="color:#ae81ff">36</span>, <span style="color:#ae81ff">36</span>, <span style="color:#ae81ff">36</span>);
--text-color: <span style="color:#ae81ff">#fefefe</span>;
--block-quote-before-color: <span style="color:#ae81ff">#333</span>;
--link-color-visited: <span style="color:#ae81ff">#7ad857</span>;
--post-shadow: <span style="color:#ae81ff">#333</span>;
}
.<span style="color:#a6e22e">post</span>.<span style="color:#a6e22e">moi</span> <span style="color:#f92672">a</span><span style="color:#f92672">[</span><span style="color:#f92672">rel</span><span style="color:#f92672">=</span><span style="color:#f92672">me</span><span style="color:#f92672">]</span> <span style="color:#f92672">img</span> {
<span style="color:#66d9ef">filter</span>: invert(<span style="color:#ae81ff">0.8</span>);
}
}
<span style="color:#f92672">html</span>.<span style="color:#a6e22e">dark</span> {
--background-color: rgb(<span style="color:#ae81ff">36</span>, <span style="color:#ae81ff">36</span>, <span style="color:#ae81ff">36</span>);
--text-color: <span style="color:#ae81ff">#fefefe</span>;
--block-quote-before-color: <span style="color:#ae81ff">#333</span>;
--link-color: <span style="color:#ae81ff">#1bcba2</span>;
--link-color-visited: <span style="color:#ae81ff">#7ad857</span>;
--post-shadow: <span style="color:#ae81ff">#333</span>;
}
<span style="color:#f92672">html</span>.<span style="color:#a6e22e">dark</span> .<span style="color:#a6e22e">post</span>.<span style="color:#a6e22e">moi</span> <span style="color:#f92672">a</span><span style="color:#f92672">[</span><span style="color:#f92672">rel</span><span style="color:#f92672">=</span><span style="color:#f92672">me</span><span style="color:#f92672">]</span> <span style="color:#f92672">img</span> {
<span style="color:#66d9ef">filter</span>: invert(<span style="color:#ae81ff">0.8</span>);
}
</code></pre></div><h3 id="not-dark-mode">Not dark-mode</h3>
<figure><img src="https://paul.kinlan.me/images/2019-10-14-addingdark-modeto-my-blog-0.jpeg"></figure>
<h3 id="dark-mode">dark-mode</h3>
<figure><img src="https://paul.kinlan.me/images/2019-10-14-addingdark-modeto-my-blog-1.jpeg"></figure>
This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan
