Categories
Uncategorized

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. Learn how you can make the WordPress Twenty Twenty theme support Dark Mode.

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.

What You Will Need

The WordPress Twenty Twenty theme does not natively support toggling the color scheme based on the system/browser Dark Mode setting (prefers-color-scheme). However, we can accomplish this using the Additional CSS customization setting of the theme.

WordPress

The first thing you will need is a WordPress installation capable of installing this theme and permits access to Additional CSS customization.

  • If you are using WordPress.com to host your site, then you will need at least the Premium subscription.
  • Any other WordPress installation or hosting solution should work for. This article is based on a WordPress 5.3 installation.
  • If you need a local WordPress test environment on your computer you can use the Windows Subsystem for Linux (WSL) for Windows 10, MAMP for MacOS, or by setting up a Linux Virtual Machine. I primarily work on a Windows device so I use WSL with the new Windows Terminal and Visual Studio Code.

The WordPress Twenty Twenty Theme

Next, you will need to activate the Twenty Twenty theme. I recommend trying this on a test site first. When you are ready to apply this theme to a production site, make sure all pages and posts look how you want before making the Dark Mode changes.

A Dark Mode Enabled Device (Optional)

Next, I recommend a device that supports Dark Mode. This will make it easier to test your changes. I wrote an article on how to set your device in Dark Mode.

A Browser That Supports prefers-color-scheme

Lastly, you will need a browser that supports the prefers-color-scheme CSS media query. I wrote an article on Dark Mode support in modern browsers last week. If your device supports Dark Mode, then you can set your browser(s) to follow the device setting. This will help with testing your changes in multiple browsers later.

The Process

Ok. Let’s set this up.

  1. Login to your WordPress administration page. (e.g., http://localhost/wp-admin)
  2. Select Appearance > Customize.
  3. Select Additional CSS.
  4. Enter the CSS into the editing area. You can use the CSS later in this article to get started.
  5. You should be able to preview most changes in this window. Toggle Dark Mode on your device or browser to preview.
  6. Select Publish when finished.

The CSS

The following CSS will enable Dark Mode capabilities for the Twenty Twenty theme using the default color scheme. You will need to modify this if you set custom colors, set content blocks with backgrounds, or have plugins that provide their own styling for some content.

@media (prefers-color-scheme: dark) {
	body {
		background: #040404;
		color: #f5efe0;
	}
	body, .entry-title a, :root .has-primary-color {
		color: #f5efe0;
	}
	#site-header {
		background: #000;
	}
	.singular .featured-media::before{
		background-color: #000;
	}
	.singular .entry-header {
		background-color: #000;
	}
	.header-footer-group, body:not(.overlay-header) #site-header .toggle, .menu-modal .toggle {
		color: #fff;
	}
	.search-modal {
		background: rgba(255,255,255,0.2);
	}
	.search-modal-inner {
		background: #000;
	}
	.menu-modal.active {
		background: rgba(255, 255, 255, 0.2);
	}
	.menu-modal-inner {
		background: #000;
	}
	.header-footer-group pre, .header-footer-group fieldset, .header-footer-group input, .header-footer-group textarea, .header-footer-group table, .header-footer-group table *, .footer-nav-widgets-wrapper, #site-footer, .menu-modal nav *, .footer-widgets-outer-wrapper, .footer-top {
		border-color: #70674e;
	}
	body:not(.overlay-header) .primary-menu > li > a, body:not(.overlay-header) .primary-menu > li > .icon, .modal-menu a, .footer-menu a, .footer-widgets a, #site-footer .wp-block-button.is-style-outline, .wp-block-pullquote:before, .singular:not(.overlay-header) .entry-header a, .archive-header a, .header-footer-group .color-accent, .header-footer-group .color-accent-hover:hover {
		/* default color #cd2653; 
		 * if you are using a custom color, update this to reflect your color scheme and appropriate contract for darkened theme.
		 * */
		color: #ec7595;
	}
	.color-accent, .color-accent-hover:hover, .color-accent-hover:focus, :root .has-accent-color, .has-drop-cap:not(:focus):first-letter, .wp-block-button.is-style-outline, a {
		/* default color #cd2653; 
		 * if you are using a custom color, update this to reflect your color scheme and appropriate contract for darkened theme.
		 * */
		color: #ec7595;
	}
	button, .button, .faux-button, .wp-block-button__link, .wp-block-file .wp-block-file__button, input[type="button"], input[type="reset"], input[type="submit"] {
		/* default color #cd2653; 
		 * if you are using a custom color, update this to reflect your color scheme and appropriate contract for darkened theme.
		 * */
		background: #ec7595;
	}
	.site-description, body:not(.overlay-header) .toggle-inner .toggle-text, .widget .post-date, .widget .rss-date, .widget_archive li, .widget_categories li, .widget cite, .widget_pages li, .widget_meta li, .widget_nav_menu li, .powered-by-wordpress, .to-the-top, .singular .entry-header .post-meta, .singular:not(.overlay-header) .entry-header .post-meta a {
		color: #9a9a9a;
	}
	cite, figcaption, .wp-caption-text, .post-meta, .entry-content .wp-block-archives li, .entry-content .wp-block-categories li, .entry-content .wp-block-latest-posts li, .wp-block-latest-comments__comment-date, .wp-block-latest-posts__post-date, .wp-block-embed figcaption, .wp-block-image figcaption, .wp-block-pullquote cite, .comment-metadata, .comment-respond .comment-notes, .comment-respond .logged-in-as, .pagination .dots, .entry-content hr:not(.has-background), hr.styled-separator, :root .has-secondary-color {
		color: #9a9a9a;
	}
	.footer-nav-widgets-wrapper, #site-footer {
		background-color: #000;
	}
}

Have Fun

You are all set to start making your WordPress site(s) respect the mode the device is in. Your visitors will appreciate it.

One reply on “How To Add Dark Mode Support to the WordPress Twenty Twenty Theme”

Comments are closed.