[Resolved] Dark mode on blocks with custom background color

[Ashutosh]

I know GP doesn’t have an automatic dark mode option, but I followed the excellent steps provided by David here to set it up on my site. Things are working great except one problem – blocks with custom background colors don’t switch to the dark option. I think this may have something to do with the block editor styles, but I wonder if there is any way to override the behavior.

Here’s the steps I followed:

1. create a new global color called “emphasis”

2. picked this variable as the background color for a paragraph block

3. added this to switch emphasis to a dark mode variable if dark mode is preferred:

@media (prefers-color-scheme: dark) {
    :root {
	--emphasis: var(--dm-base-2);
    }
}

My expectation is that the block background should change to “–dm-base-2” color if dark mode is preferred, but it doesn’t do that. I have linked to a post where this is used.

[David]

Hi there,

very odd.
So i can see your color variables CSS:

:root {
    --contrast: #3d2c2c;
    --contrast-2: #575760;
    --contrast-3: #222222;
    --base: #e0e0e0;
    --base-2: #f7f8f9;
    --base-3: #ffffff;
    --accent: #077330;
    --dm-contrast: #e0e0e0;
    --dm-base: #3d2c2c;
    --dm-accent: #ace8a6;
    --dm-contrast-2: #f7f8f9;
    --dm-contrast-3: #ffffff;
    --dm-base-2: #575760;
    --dm-base-3: #222222;
    --emphasis: #f0ffff;
}

And that is correct.
However, GP also generates the has- classes that WordPress core uses to add styles.
Which look like this:

.has-base-color {
    color: var(--base);
}

But on your site, its saving the static color and not the variable like this:

.has-emphasis-color {
    color: #f0ffff;
}

.has-emphasis-background-color {
    background-color: #f0ffff;
}

Are you using any other functions related to styles on your site ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ashutosh]

David, thanks for looking into this! I am not aware of any such functions, but to be fair I am constantly changing stuff on this site and might have done something. I went through my functionality plugin and removed the code that dequeued the wp emoji script, but it didn’t fix the above issue:

/**
 * Disable the emoji's
 */
function disable_emoji_scripts() {
	remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
	remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
	remove_action( 'wp_print_styles', 'print_emoji_styles' );
	remove_action( 'admin_print_styles', 'print_emoji_styles' );	
	remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
	remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );	
	remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
	
	// Remove from TinyMCE
	add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
}
add_action( 'init', 'disable_emoji_scripts' );

/**
 * Filter out the tinymce emoji plugin.
 */
function disable_emojis_tinymce( $plugins ) {
	if ( is_array( $plugins ) ) {
		return array_diff( $plugins, array( 'wpemoji' ) );
	} else {
		return array();
	}
}

Other stuff in the site plugin don’t do any style related changes. My other plugins are all pretty basic – Contact Form 7, Flamingo, GenerateBlocks, GP Premium, and LiteSpeed Cache. All extra features of the cache plugin (minification, concatenation, optimziation, etc) are turned off.

Adding the below CSS seems to “fix” the issue. This works for me.

@media (prefers-color-scheme: dark) {
    .has-emphasis-background-color 
    {
	background-color: var(--dm-base-2);
    }
}

[David]

You can try regenerating the CSS in the Customizer > General, see if that pulls in the variabls.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ashutosh]

Tried it followed by a full cache purge and Cloudflare cache purge, but no luck lol. I was doing a manual DB cleanup a few weeks back, I might have messed something up in there. The custom CSS works so there’s no further action needed. Thanks again David for your help!

[David]

Glad to hear you have a working solution!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts