Categories
Uncategorized

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. This is because content blocks with a custom background set ignore our dark mode settings.

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.

Step 1: Customize Your Theme

  1. Login to your WordPress administration page. (e.g., http://localhost/wp-admin)
  2. Select Appearance > Customize.
  3. Select Additional CSS.
  4. Add your default styling (Light Mode) before the prefers-color-scheme media query. I’m using .adpanel { background: #fff; }
  5. Add your Dark Mode styling within the prefers-color-scheme media query. I’m using .adpanel { background: #000; }
  6. Select Publish and close the Customizer.

Modify the Content Block

  1. Select the page (Pages > All Pages) or post (Posts > All Posts) with the content block that has a custom background. In my case it is “The New UMoMMA Opens Its Doors“ sample page.
  2. Scroll to the content block with the custom background and select it.
  3. On the right, you should see a Color Settings section under the Block tab. Select Clear to remove the background color.
  4. The background should now match the rest of the page. Make note of whether the padding changed as well.
  5. Select Advanced and enter the custom class we created earlier in the Additional CSS Class(es) field. If the padding changed as well you may need to add an additional class as well to get it back. I’m using adpanel has-background in the Twenty Twenty theme.
  6. WordPress will not show these changes in the editor so we will need to select Preview to see it in action.
  7. Select Update when finished.
  8. Repeat for any other content block with static backgrounds on this or any other page or post.

The CSS

Here is the CSS created specifically to provide a custom background for specific content blocks.

.adpanel {
	background: #fff;
}

@media (prefers-color-scheme: dark) {
	.adpanel {
		background: #000;
	}
}

If you want to see the whole solution with the CSS from the previous article, here it is as well.

.adpanel {
	background: #fff;
}

@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;
	}
	.adpanel {
		background: #000;
	}
}

Congratulations

That’s it. With this technique you set any content block on your WordPress site to support Dark Mode while using a custom background color.