Editor background is dark gray when not using theme styles

[tvolpert]

Quick summary

With Gutenberg plugin active, and the use theme styles setting turned off under Preferences in the page/post editor, the editor background turns dark gray, but still uses black text, making it practically unreadable. Deactivating Gutenberg resolves the issue.

Steps to reproduce

1. start with an atomic site and make sure the Gutenberg plugin is active
2. add a new page or post (or edit an existing one)
3. click the three-dots in the top-right corner of the editor, then preferences > appearance, and turn off use theme styles
4. crank up your monitor's brightness to read any of the text in the editor
   

What you expected to happen

if not using the theme's styles, the editor should still be legible. there's barely any contrast between the font color and the background here making it all but impossible to work with

What actually happened

the background is dark gray with black text

Impact

Some (< 50%)

Available workarounds?

No but the platform is still usable

Platform (Simple and/or Atomic)

Atomic

Logs or notes

It seems to only affect block themes - I tried a few classic themes and didn't have the same issue there

[tvolpert]

reported in 7545301-zd-a8c

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 7545301-zen
• 7541861-zen
• 7570885-zen
• 8176884-zen
• 7875379-zen
• 8177939-zen
• 8154286-zen
• 8181276-zen

[rw-ye]

Another report here: 7541861-zd-a8c

Theme: Masu

Asked the user to enable Use theme styles in the page editor as a workaround.

[maciejpilarski]

📌 REPRODUCTION RESULTS
– Tested on Atomic – Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO
I was able to reproduce the issue on my side:

📌 ACTIONS

• Triaged

[jp-imagines]

Another report in 7570885-zd-a8c (Payton theme). Suggested enabling use theme styles toggle as a workaround.

Edited to add: this user is requesting a follow-up once this is fixed.

[danielbachhuber]

I ran into this with the Beaumont theme.

[liviopv]

Not exactly the same issue, but it looks like the GB 18.3 merge yesterday triggered more issues related to theme styles not showing in the Post/Page Editor.

8176884-zd-a8c

This site has Skivers active with a custom background, and when Gutenberg is active, the editor shows a white background, even when the "Use theme styles" is active.

I wasn't able to reproduce on my Atomic site with the same theme/setup.

[liviopv]

Same as Automattic/themes#7777

[Robertght]

7875379-zen
Theme: Sten

Work ok if I disable Gutenberg.
I was able to replicate this locally.

[upwardmomentum84]

8177939-zd-a8c

Works ok if Gutenberg is deactivated.

[hngdny]

8154286-zd-a8c
Theme: StartFitter

Works as expected (matching background color between Editor and Live Site) when Gutenberg is deactivated.

Edit: This is also affecting the appearance of 'Default' font within the Editor, making font appear smaller.

[Greatdane]

I also noticed this with a site, Deactivating Yoast SEO fixed the issue on that occasion

[Greatdane]

8181276-zd-a8c
Gutenberg disabled fixed the issue

[MaggieCabrera]

Hi! in 18.3 we made this change but we still have this CSS that should color the body white. I could not reproduce this with Sten and the Use theme styles deactivated. It should be showing white instead of gray (and in any case, our change was setting the gray to #ddd which shouldn't be as dark as the report suggests. I would welcome help reproducing this