<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...</p>