[Resolved] Gutenberg editor ignores colors from Customizer in tablet and smartphone view

[Thorsten]

Hello,

I have a problem I cannot fix by myself. I am using WordPress 6.0.1 (but the error occurs with 5.9.3, too) and the current versions from GeneratePress and GenerateBlocks (both as Pro/Plus).

In Customizer I am setup colors and it works as expected. I see my chosen background color, if I view my site. In the desktop view of Gutenberg it looks the same, but if i switch into tablet or smartphone view the background is ignored and sill be shown in standard white. I’ve tried to set up the color in the body and content section of colors in Customizer. Nothings helps.

To illustrate the issues I have prepared 2 screenshots. The first one shows Gutenberg in Desktop view:

This 2nd on Gutenberg in tablet view:

Any ideas how to fix that?
Thorsten

[Ying]

Hi Thorsten,

The white background is actually added by WP using inline style.

Can you try this snippet? Replace the #171717 with your color code。

add_filter( 'block_editor_settings_all', function( $editor_settings ) {
	$css = 'body{background-color: #171717;}';

	$editor_settings['styles'][] = array( 'css' => $css );

	return $editor_settings;
} ); 

[Thorsten]

Hi Ying,

that doesn’t work for for me, but after reading your answer I take a look into the web inspector and solved the problem with a simple

html :where(.editor-styles-wrapper){
	background-color: var(--contrast) !important;
}

in my custom css. With the :where pseudo class this rule applies only in Gutenberg, I think 😉

[Ying]

Hum..the CSS doesn’t work for me, but anyway glad it works for you 🙂

[Thorsten]

But should work. The selector is the same Gutenberg use by itself. Do you have the contrast color set to another color than white?

[Ying]

Oh, do you mean you add the CSS into the PHP snippet?

If that’s the case, the CSS should work.

[Author]

Posts