Sand Fox (Posts about prefers-color-scheme)
https://sandfox.me/tags/prefers-color-scheme.xml
2024-03-25T17:50:28Z
Anton Smirnov
Nikola
Dark Theme for the Blog
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_0380243ef5664e3599934c410aba6e59-1" name="rest_code_0380243ef5664e3599934c410aba6e59-1" href="https://sandfox.me/misc/dark-theme.html#rest_code_0380243ef5664e3599934c410aba6e59-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_0380243ef5664e3599934c410aba6e59-2" name="rest_code_0380243ef5664e3599934c410aba6e59-2" href="https://sandfox.me/misc/dark-theme.html#rest_code_0380243ef5664e3599934c410aba6e59-2"></a><span class="w"> </span><span class="nt">a</span><span class="w"> </span><span class="p">{</span>
<a id="rest_code_0380243ef5664e3599934c410aba6e59-3" name="rest_code_0380243ef5664e3599934c410aba6e59-3" href="https://sandfox.me/misc/dark-theme.html#rest_code_0380243ef5664e3599934c410aba6e59-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_0380243ef5664e3599934c410aba6e59-4" name="rest_code_0380243ef5664e3599934c410aba6e59-4" href="https://sandfox.me/misc/dark-theme.html#rest_code_0380243ef5664e3599934c410aba6e59-4"></a><span class="w"> </span><span class="p">}</span>
<a id="rest_code_0380243ef5664e3599934c410aba6e59-5" name="rest_code_0380243ef5664e3599934c410aba6e59-5" href="https://sandfox.me/misc/dark-theme.html#rest_code_0380243ef5664e3599934c410aba6e59-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>