Auto-dark mode in WordPress

I’ve spent most of today moving my website to a new host, and while I was doing it I wanted to add a dark mode.

It took quite a lot of fiddling around, but now I’ve got the site to automatically switch between light and dark mode based on the OS mode. I use macOS, and it automatically switches to dark mode at night-time. Now my website switches along with it!

I thought there would be a plugin to do this automatically, but sadly there isn’t… Also, the standard CSS methods recommended by Apple don’t work either. In the end, all it needed was a few new functions in the functions.php file.

First I created a new child theme based on the default WordPress Twenty Seventeen theme that I’ve been using since I set up this website.

In the child theme, I didn’t add anything to the ​style.css stylesheet apart from the initial comment that sets up the child as based on the parent template:

/*
Theme Name: Twenty Seventeen Child
Theme URI: https://wordpress.org/themes/twentyseventeen/
Description: Twenty Seventeen Child Theme for matteaston.net including automatic dark mode.
Author: Matt Easton
Template: twentyseventeen
Version: 1.0.0
*/

All the code required for the automatic dark mode goes into the functions.php file:

<!--?php 

function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', 
                      get_template_directory_uri().'/style.css' );
}

function enqueue_autodark_style() {
    wp_enqueue_style( 'twentyseventeen-colors-dark', 
                      get_template_directory_uri().'/assets/css/colors-dark.css’, 
                      '', '', 
                      '(prefers-color-scheme: dark)' );
}

function darken_body_class( $classes ) {
    // this dark class will only take effect when the dark stylesheet is loaded,
    // so depends on `media=(prefers-color-scheme: dark)`
    $classes[] = 'colors-dark’;
    return $classes;
}

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
add_action( 'wp_enqueue_scripts', 'enqueue_autodark_style' );
add_filter( 'body_class', 'darken_body_class' );

The first function just loads the styles from the parent theme, this is required for all child themes.

The second function adds an extra stylesheet link for the dark mode, along with the media tag (prefers-color-scheme: dark), which is the way the browser knows how to switch colour schemes based on the OS option. This means that this stylesheet is only loaded if the OS is in dark mode.

The third function adds a class to the body definition, which is what tells WordPress to apply the dark colour scheme to the page. This is applied all the time, but only makes any difference when the dark stylesheet has been loaded.

I also needed one small change to the footer in the file template-parts/footer/site-info.php to load different versions of the WordPress logo for light and dark modes, using a method from the Apple instructional video:

<picture>
    <source srcset="https://s.w.org/style/images/about/WordPress-logotype-standard-white.png" media="(prefers-color-scheme: dark)" />
    <img src="https://s.w.org/style/images/about/WordPress-logotype-standard.png" style="height: 56px; margin-left: -15px" />
</picture>

That’s about it! It was much simpler than I thought in the end, but it took me a long time to get there…