How to Customize a WordPress Content Block for Dark Mode

In a previous article, we setup the WordPress Twenty Twenty Theme to support Dark Mode. You may have noticed that the solution was not perfect. For example, the “Become a Member” content block on the homepage become washed out and unreadable.

This is because the background color of that content block was set to white overriding the Theme’s color scheme. To fix this, we are going to use the Additional CSS Class(es) option for the content block to set both a light and dark background color instead. The values I enter will be based on the Twenty Twenty theme, however the basic process is the same regardless of theme.

Advertisement

How To Add Dark Mode Support to the WordPress Twenty Twenty Theme

Dark Mode is now here on most devices and supported in all modern browsers using the prefers-color-scheme media query. There are many benefits to Dark Mode support on our devices including accessibility, power saving, and personal preference. For example, when there are too many light or bright colors on the display the content becomes unreadable to those with certain vision impairments.

However, the next major hurdle in Dark Mode support are our websites and web applications. Despite the devices and apps providing a usable dark interface, most websites still do not. If you publish a blog, you can begin to better support your users by enabling a Dark Mode version of your website, blog, or application. Here’s a great article that goes into much more detail about Dark Mode and the prefers-color-scheme media query.

In this article, we will add Dark Mode support to a WordPress site using the Twenty Twenty theme.

Configuring MySQL Permissions for WordPress on Ubuntu 18.04 and WSL

I discussed in my previous article on the changes needed to automate the upgrade of Ubuntu 18.04 on the Windows Subsystem for Linux (WSL). The recommended commands that I had been provided were intended for Ubuntu 16.04, yet I discovered some steps are a little different on 18.04.

My goal is to create a script that fully automates the setup of WordPress on WSL, based on this article by Jason Cross. As I walked through his tutorial I noticed another more significant difference when it came to setting up the WordPress database.