https://sandfox.me/tags/dark-theme.xml 2026-01-05T10:06:08Z Anton Smirnov Nikola https://sandfox.me/misc/dark-theme.html 2019-10-26T15:40:00+03:00 2019-10-26T15:40:00+03:00 Anton Smirnov

<figure><img src="https://sandfox.me/images/misc/dark-theme/dark.png"></figure> <div><p>Just finalized the dark theme for the blog. The idea is simple, use <code class="docutils literal"><span class="pre">prefers-color-scheme</span></code> media query and wrap dark style elements with it:</p> <div class="code"><pre class="code css"><a id="rest_code_56e17ad5a6eb4f55a61ed1315f222004-1" name="rest_code_56e17ad5a6eb4f55a61ed1315f222004-1" href="https://sandfox.me/misc/dark-theme.html#rest_code_56e17ad5a6eb4f55a61ed1315f222004-1"></a><span class="p">@</span><span class="k">media</span><span class="w"> </span><span class="o">(</span><span class="nt">prefers-color-scheme</span><span class="o">:</span><span class="w"> </span><span class="nt">dark</span><span class="o">)</span><span class="w"> </span><span class="p">{</span> <a id="rest_code_56e17ad5a6eb4f55a61ed1315f222004-2" name="rest_code_56e17ad5a6eb4f55a61ed1315f222004-2" href="https://sandfox.me/misc/dark-theme.html#rest_code_56e17ad5a6eb4f55a61ed1315f222004-2"></a><span class="w"> </span><span class="nt">a</span><span class="w"> </span><span class="p">{</span> <a id="rest_code_56e17ad5a6eb4f55a61ed1315f222004-3" name="rest_code_56e17ad5a6eb4f55a61ed1315f222004-3" href="https://sandfox.me/misc/dark-theme.html#rest_code_56e17ad5a6eb4f55a61ed1315f222004-3"></a><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="mh">#4be</span> <a id="rest_code_56e17ad5a6eb4f55a61ed1315f222004-4" name="rest_code_56e17ad5a6eb4f55a61ed1315f222004-4" href="https://sandfox.me/misc/dark-theme.html#rest_code_56e17ad5a6eb4f55a61ed1315f222004-4"></a><span class="w"> </span><span class="p">}</span> <a id="rest_code_56e17ad5a6eb4f55a61ed1315f222004-5" name="rest_code_56e17ad5a6eb4f55a61ed1315f222004-5" href="https://sandfox.me/misc/dark-theme.html#rest_code_56e17ad5a6eb4f55a61ed1315f222004-5"></a><span class="p">}</span> </pre></div> <p><a href="https://sandfox.me/misc/dark-theme.html">Read more…</a> (1 min remaining to read)</p></div>