[Resolved] Dark background in desktop editor – white background in tablet and mobile editor

[Marie]

Hello Generatepress team,

I have a trouble with the color of the editor background.
My website’s background is black.
When I edit the post or page, it’s ok when I edit in desktop. But if I want to edit the tablet or mobile version, the background is white (and the text white too).

I try to add the snippet :
add_action( ‘enqueue_block_editor_assets’, function() {
$css = ‘body.editor-styles-wrapper{background-color: #171717;}’;
wp_add_inline_style( ‘generate-block-editor-styles’, $css );
}, 100 );

But it does’nt work.
Can you help me.

Thanks.
Marie

[David]

Hi there,

can you confirm you’re using the latest version of the Theme and GPP Plugin ? As I thought we had patched the issues WP 5.9 introduced with their updated responsive views. Let me know

[Marie]

Yes I confirm. I have GP 3.1.3 and Premium 2.1.2

[David]

Hmm… we’ll take a look into this.
Try using this snippet:

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

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

	return $editor_settings;
} ); 

[Marie]

Yes it works.
Thank you very much.

[David]

You’re welcome.
We’ll take a look into whats going on there 🙂

[Maik]

Hi David.

I had had this behavior as well. And yes, still with the neweset version of GP (3.2.3 & 2.2.1) and WP (6.1). 😉
With your snippet it works perfectly for me too. Thanks a lot for that.

Since the last updates of GP it seems that an “!important” or a better selector is needed. Otherwise the background in the mobile view fades to light again.

I also used the color by variable from my global colors. If the background ever changes, the editor changes right away too.

body{background-color: var(--contrast) !important;}

[David]

Glad to hear that worked for you too! and thanks for sharing your method.
I thought this had been resolved, so we’ll take another look if 6.1 made more changes.

[Author]

Posts