Dark Mode and other site updates
<p>Inspired by iOS’s new dark mode (and halloween!), I decided to a dark mode to the website using the new <code>prefers-color-scheme</code> media query. It was surprisingly easy to do. After I’d changed the </p> <p>This took care of 90% of it:</p> <div class="highlight"><pre class="highlight css"><code><span class="k">@media</span> <span class="p">(</span><span class="n">prefers-color-scheme</span><span class="p">:</span> <span class="n">dark</span><span class="p">)</span> <span class="p">{</span> <span class="nt">html</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#19222b</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#eee</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.page-wrapper__inner</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#222f3b</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#eee</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> </code></pre></div> <p>Using a straight black-and-white background and foreground combo looks too harsh on the eyes, so you want to find a gray-ish background. Mine is a bluish-grayish color that matched well with some of the existing highlight colors on the site.</p> <p>Then it was a matter of browsing through the site and finding UI elements that didn’t look right. It took me less than 30 minutes in total.</p> <p>Also, I decided to merge my blog, which was split into “articles” and “work journal” entries, back together. It was more trouble than it was worth. Sorry if this messed up the RSS feed.</p> <p>In case you’re on an OS or browser that doesn’t support <code>prefers-color-scheme</code>, here’s a screenshot:</p> <p><img src="/assets/images/adam_albrecht_dot_com_dark_mode-2e810926.png" alt="Screenshot of Dark Mode on my website" /></p>