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.

Does Your Browser Support Dark Mode? It Should

2019 became the year of Dark Mode. Nearly all consumer Operating Systems (OS) received updates this year to support Dark Mode. Some devices, like Android phones, may have these updates delayed by their manufacturer, carrier, or both. I wrote last week on how to setup Dark Mode on these various devices.

My favorite part is that all Browser vendors have released this year (or will release shortly) Dark Mode capable browsers. This is not just changing the user interface to match the devices Dark Mode setting. This is also supporting the prefers-color-scheme CSS media query so that websites and web applications can adjust to Dark Mode as well.

Current Browser Support

The following browsers currently support the prefers-color-scheme CSS media query.

• Chrome (76 or later)
• Edge (76 or later)
• Firefox (67 or later)
• Opera (62 or later)
• Safari (12.1 or later for MacOS and 13 or later for iOS/iPadOS)

The new Edge with support for the prefers-color-scheme media query is scheduled for release tomorrow. However, anyone can try it out today.

Internet Explorer and all older versions of these browsers do not support the prefers-color-scheme media query.

Does Your Browser Support Dark Mode?

Regretfully, at the time of writing, my blog does not yet support Dark Mode and the prefers-color-scheme media query. However, I created a CodePen to help you find out if your browser is ready. Check it out.

It is likely that your browser is ready. You may notice various sites already adjust to Dark Mode for you that previous had a Light Mode interface (e.g., Twitter.com). If you create or maintain websites and web applications, now is a good time to start developing support for a Dark Mode interface in addition to a Light Mode. I will be writing more on how to do this starting next week.

How to Enable Dark Mode on Your Device

Did you know that most devices now support Dark Mode? It’s true. This means that if you have a relatively current device with the latest updates then you likely have access to it already.

Why Use Dark Mode

There are a variety of reasons why you might want to use Dark Mode. Here are a few of the most common.

• Accessibility
• Power Saving
• Personal Preference

Dark Mode can make it easier for you to read the text or reduce eye strain. It can extend your battery life between charges. Of course, many also prefer it over Light Mode for aesthetic reasons.

My 2020 myAvatar ScriptLink Wishlist

I have been working with Netsmart myAvatar and its ScriptLink feature for many years now. ScriptLink enables organizations to extend the functionality of most forms in the medical record. As with any extension feature, there are significant opportunities to improve or hinder the user’s experience and the overall solution. This means that a robust, mature solution can enhance the gains and minimize the risks.

Is Your Company Protected From Email Spoofing?

It’s getting bad out there with emails and I don’t mean those reply all conversations that you cannot escape from. I mean spam, phishing, malware, and many other risks related to our organizations’ use of email. It is easy to feel helpless in the face of it. For me, it was email spoofing and CEO Fraud. I looked at these malicious mail servers pretending to use my domain and was unaware that the tools were already available to protect me and my organization.

De-Clutter Office 365

Email is a mess most of the time. Junk, spam, solicitations, and phishing make up a majority of the email each is us receive on any given day. Email vendors each provide solutions to manage this. Microsoft, for example, tried one solution named Clutter with mixed results and now it’s time to de-clutter Office 365 with Focused Inbox.

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.

Scripting Ubuntu 18.04 Upgrade for WSL

If you have been running Ubuntu 16.04 on Windows Subsystem for Linux (WSL), you may need to modify your scripts to automate future upgrades on 18.04. There are differences in Ubuntu 18.04 that may require our attention if we want the upgrade to be completely unattended.

Getting Started

Welcome to the Rarely Simple blog! I am glad you’re here.

Before we get started there are a couple things you should know. First, this is my technology-oriented blog. I will be resuming my theology blog in 2020. Second, the name comes from an Oscar Wilde quote that I appreciate. More on that shortly.