Dark Mode Twenty Sixteen

I decided I wanted to have a dark mode on this site. It’s a nice feature, and with some CSS can be made to auto change based on the user preferences—meaning you will only see it if your computer / phone is in dark mode.

The theme I use is Twenty Sixteen, which I have previously modified for some changes to typography.

The task, similar to to the typography change, started by searching through the CSS file to find any reference to color. I then took those references and organized them by what color they were using.

The pallet turned out to be 5 primary colors, two accent ones (which were used as inverses of each other). I hunted for colors to use and put together a dark theme that looks like this:

screenshot of this website with the dark mode theme active, background is black and dark grey, words are white and blue

I used a simple media query to allow the site to change with the user preferences:

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

There was one issue I found. Twenty Sixteen has color customizations that load stylesheets at the bottom of the header. I tried a few things to get the dark mode css to load after that, which would mean both were working, but couldn’t get it to work.

I used the functions.php file to remove both the loaded CSS and the options from the customizer to prevent any issues. I plan to figure this one out so modifications to ‘light’ mode will work with ‘dark’ mode.

I did make an option pane to let you switch which dark pallet you’d like to use. Alpenglow is a theme for Firefox with a rich purple pallet, and I wanted to see if I could make something similar for this and have the option to change back and forth if I need to (spoiler, it worked).

Here is the base media query for the dark mode in Twenty Sixteen. I’m planning to post a Github repository for the whole theme on the of chance it is useful to someone.

/* Dark Mode Theme */

@media screen and (prefers-color-scheme: dark)
{
    /* Text Colors  */

    /* 
        Primary Colors: 
        1 #e1e1e1 Primary Text Color
        2 #111111 Darkest Main Body Area Color
        3 #222222 Dark 
        4 #343434 Med Dark
        5 #222222 Inactive

        Accent Colors: 
        1 #8e8e8e
        2 #007acc

        Binary: 
        Either white (#FFF) or black (#000)

        Accent color 1 and 2 are used as inverse of each other thoughout the theme
         */

    /* Primary Color 1 : Text Color */
    body,
        button,
        input,
        select,
        textarea,
        blockquote cite,
        .wp-block-quote cite,
        blockquote small,
        input[type="date"]:focus,
        input[type="time"]:focus,
        input[type="datetime-local"]:focus,
        input[type="week"]:focus,
        input[type="month"]:focus,
        input[type="text"]:focus,
        input[type="email"]:focus,
        input[type="url"]:focus,
        input[type="password"]:focus,
        input[type="search"]:focus,
        input[type="tel"]:focus,
        input[type="number"]:focus,
        textarea:focus,
        .main-navigation a,
        .dropdown-toggle,
        .social-navigation a,
        .post-navigation a,
        .widget-title a,
        .site-branding .site-title a,
        .menu-toggle,
        .entry-title a,
        .page-links > .page-links-title,
        .pagination a:hover,
        .pagination a:focus,
        .comment-reply-title small a:hover,
        .comment-reply-title small a:focus,
        .wp-block-code { color: #e1e1e1; }

    /*  Accent Color 1 */
    blockquote,
        input[type="date"],
        input[type="time"],
        input[type="datetime-local"],
        input[type="week"],
        input[type="month"],
        input[type="text"],
        input[type="email"],
        input[type="url"],
        input[type="password"],
        input[type="search"],
        input[type="tel"],
        input[type="number"],
        textarea,
        .post-password-form label,
        a:hover,
        a:focus,
        a:active,
        .post-navigation .meta-nav,
        .image-navigation,
        .comment-navigation,
        .widget_recent_entries .post-date,
        .widget_rss .rss-date,
        .widget_rss cite,
        .site-description,
        .author-bio,
        .entry-footer,
        .entry-footer a,
        .sticky-post,
        .taxonomy-description,
        .entry-caption,
        .comment-author,
        .comment-metadata,
        .pingback .edit-link,
        .comment-metadata a,
        .pingback .comment-edit-link,
        .comment-form label,
        .comment-notes,
        .comment-awaiting-moderation,
        .logged-in-as,
        .form-allowed-tags,
        .site-info,
        .site-info a,
        .wp-caption .wp-caption-text,
        .gallery-caption,
        .widecolumn label,
        .widecolumn .mu_register label,
        a.page-numbers:hover { color: #8e8e8e; }

    /*  Accent Color 2  */
    a,
        .main-navigation a:hover,
        .main-navigation a:focus,
        .dropdown-toggle:hover,
        .dropdown-toggle:focus,
        .social-navigation a:hover:before,
        .social-navigation a:focus:before,
        .post-navigation a:hover .post-title,
        .post-navigation a:focus .post-title,
        .tagcloud a:hover,
        .tagcloud a:focus,
        .site-branding .site-title a:hover,
        .site-branding .site-title a:focus,
        .menu-toggle:hover,
        .menu-toggle:focus,
        .entry-title a:hover,
        .entry-title a:focus,
        .entry-footer a:hover,
        .entry-footer a:focus,
        .comment-metadata a:hover,
        .comment-metadata a:focus,
        .pingback .comment-edit-link:hover,
        .pingback .comment-edit-link:focus,
        .comment-reply-link,
        .required,
        .site-info a:hover,
        .site-info a:focus,
        .main-navigation li:hover > a,
        .main-navigation li.focus > a { color: #007acc; }

    /*  Binary, White or Black: color: #fff; */
    mark,
        ins,
        button,
        button[disabled]:hover,
        button[disabled]:focus,
        input[type="button"],
        input[type="button"][disabled]:hover,
        input[type="button"][disabled]:focus,
        input[type="reset"],
        input[type="reset"][disabled]:hover,
        input[type="reset"][disabled]:focus,
        input[type="submit"],
        input[type="submit"][disabled]:hover,
        input[type="submit"][disabled]:focus,
        .pagination .nav-links:before,
        .pagination .nav-links:after,
        .pagination .prev,
        .pagination .next,
        .pagination .prev:hover,
        .pagination .prev:focus,
        .pagination .next:hover,
        .pagination .next:focus,
        .widget_calendar tbody a,
        .widget_calendar tbody a:hover,
        .widget_calendar tbody a:focus,
        .menu-toggle.toggled-on,
        .menu-toggle.toggled-on:hover,
        .menu-toggle.toggled-on:focus,
        .page-links a,
        .page-links a:hover,
        .page-links a:focus
    {
        /*  color: #000; */
        color: #fff;
    }

    /* Back Ground Colors */
    /*  Primary Color 2: Darkest */
    .main-navigation ul ul li, 
        input[type="date"]:focus,
        input[type="time"]:focus,
        input[type="datetime-local"]:focus,
        input[type="week"]:focus,
        input[type="month"]:focus,
        input[type="text"]:focus,
        input[type="email"]:focus,
        input[type="url"]:focus,
        input[type="password"]:focus,
        input[type="search"]:focus,
        input[type="tel"]:focus,
        input[type="number"]:focus,
        textarea:focus,
        .site { background-color: #111111; }

    /*  Primary Color 3 Dark */
    body,
        button,
        button[disabled]:hover,
        button[disabled]:focus,
        input[type="button"],
        input[type="button"][disabled]:hover,
        input[type="button"][disabled]:focus,
        input[type="reset"],
        input[type="reset"][disabled]:hover,
        input[type="reset"][disabled]:focus,
        input[type="submit"],
        input[type="submit"][disabled]:hover,
        input[type="submit"][disabled]:focus,
        .pagination:before,
        .pagination:after,
        .pagination .prev,
        .pagination .next,
        .menu-toggle.toggled-on,
        .menu-toggle.toggled-on:hover,
        .menu-toggle.toggled-on:focus,
        .page-links a { background: #222222; }

    /*  Primary color 4 Medium Dark */
    code,
        hr { background: #343434; }

    /*  Primary Color 4: Inactive */
    input[type="date"],
        input[type="time"],
        input[type="datetime-local"],
        input[type="week"],
        input[type="month"],
        input[type="text"],
        input[type="email"],
        input[type="url"],
        input[type="password"],
        input[type="search"],
        input[type="tel"],
        input[type="number"],
        textarea { background: #222222; }

    /*  Accent Color 1; */
    .widget_calendar tbody a:hover,
        .widget_calendar tbody a:focus { background-color: #8e8e8e; }

    /*  Accent Color 2 */
    mark,
        ins,
        .pagination .prev:hover,
        .pagination .prev:focus,
        .pagination .next:hover,
        .pagination .next:focus,
        button:hover,
        button:focus,
        input[type="button"]:hover,
        input[type="button"]:focus,
        input[type="reset"]:hover,
        input[type="reset"]:focus,
        input[type="submit"]:hover,
        input[type="submit"]:focus,
        .widget_calendar tbody a,
        .page-links a:hover,
        .page-links a:focus { background: #007acc; }

    /*  Border Colors */
    /*  Primary color 3 Dark */
    .post-navigation,
        .post-navigation div + div,
        .widget,
        .comments-title,
        .comment-reply-title { border-color: #222222; }

    /*  Primary Color 4 */
    /*  This is separate because of the 'transparent' */
    .main-navigation ul ul:before,
        .main-navigation ul ul:after { border-color: #343434 transparent; }

    /*  Primary Color 4 */
    .main-navigation ul ul li,
        .main-navigation ul ul { border-color: #343434; }

    /*  Accent Color 1 */
    input[type="date"]:focus,
        input[type="time"]:focus,
        input[type="datetime-local"]:focus,
        input[type="week"]:focus,
        input[type="month"]:focus,
        input[type="text"]:focus,
        input[type="email"]:focus,
        input[type="url"]:focus,
        input[type="password"]:focus,
        input[type="search"]:focus,
        input[type="tel"]:focus,
        input[type="number"]:focus,
        textarea:focus,
        .tagcloud a:hover, 
        .tagcloud a:focus { border-color: #8e8e8e; }

    /*  background-color: transparent; */
    .menu-toggle,
        .menu-toggle:hover,
        .menu-toggle:focus { background-color: transparent; }
    body:not(.search-results) .entry-summary blockquote { border-color: currentColor; }
}

Leave a Reply

Your email address will not be published.