Dark mode aware dynamic theme

WriteFreely Themes
1

This is just a simple trick that I also use in my own blog. Thought it would be nice to share it with others as well. Thanks to prefers-color-scheme media feature you can dynamically activate a dark mode theme on your blog depending on users’ preference.

Usage example (Dark theme):

@media screen and (prefers-color-scheme: dark) {

    /* 
    Written in 2020 by Write.as

    To the extent possible under law, the author(s) have dedicated all 
    copyright and related and neighboring rights to this software to the 
    public domain worldwide. This software is distributed without any 
    warranty.

    You should have received a copy of the CC0 Public Domain Dedication 
    along with this software. If not, see 
    http://creativecommons.org/publicdomain/zero/1.0
    */

    body {
            color: #eee;
            background: #111;
        }
        
    body .post-title a:link, a:visited {
            color: #ccc;
        }
        
    #collection .post-title a {
                color: #ccc;
    }
        
    #collection {
            color: #eee;
        }
        
    #collection pre {
            background: #060606;
        }

    body h1 a, body header h2 a {
            color: #cfcfcf;
        }
        
    body h1 a:hover, body header h2 a:hover {
            color: #fff;
        }
        
    body h1 a:visited, body header h2 a:visited {
            color: #ccc;
        }
        
    body #manage ul a, body .dropdown-nav ul a, body #manage ul ul a, body #manage ul a {
            color: #ccc;
        }
        
    body .dropdown-nav ul ul, body .dropdown-nav ul li:hover, body #manage ul ul, body #manage ul ul li:hover, body #manage ul li:hover {
            background: #222;
        }

    body #official-writing h2, body #official-writing h3, body #official-writing h4, body #wrapper h2, body #wrapper h3, body #wrapper h4 {
            color: #ddd;
        }
        
    body a {
            color: #a2a2ff;
        }
        
    body a:visited {
            color: #c98afd;
        }
        
    body #official-writing h2, body #official-writing h3, body #official-writing h4, body #wrapper h2, body #wrapper h3, body #wrapper h4 {
            color: #aaa;
        }
        
    body #official-writing ul.collections li.collection a.title:link, body #official-writing ul.collections li.collection a.title:visited, body #wrapper ul.collections li.collection a.title:link, body #wrapper ul.collections li.collection a.title:visited {
            color: #cfcfcf;
        }
        
    body #official-writing ul.collections li a.create, body #wrapper ul.collections li a.create {
            color: #aaa;
        }
        
    body#me #official-writing h2 a:link, body#me #official-writing h2 a:visited {
            color: #a2a2ff;
        }
        

    input {
            background: #202020;
            color: #bbb;
        }
        
    #manage ul ul li img {
            filter: invert(1);
        }
        
    #post code, #collection code, #subpage code {
                    background: #202020;
            color: #bbb;
        }

}
2 Likes