Description

Splitting this out from #60275

To be more accurate, in the Post editor the CSS class is-dark-theme is initially applied but than removed.
In the Site editor, it works as expected.

It seems to be something missed with the refactorings of the editor irame, editor styles scoping and such.

When a theme has a dark background color, useDarkThemeBodyClassName is responsible for adding the is-dark-theme CSS class to the editor iframe body element.

It does that, but then the body gets updated and gets new CSS classes when the iframe is fully loaded, see the Iframe component internal handling of the classes in the onload callback and then the classes are set to the body.

I'm not sure whether that means the body gets entirely replaced. Regardless the new CSS classes replace the initial ones thus removing is-dark-theme it it was set.

The is-dark-theme CSS class is necessaty to make some editor features and styles work correctly.

Step-by-step reproduction instructions

• Set Twenty Twenty-Four as active theme.
• Go to the Site editor > Styles, set a theme style variation that has a dark background e.g. 'Onyx' and save. Update: the Site editor UI has changed and now 'Onyx' is shown as a palette variation in the Styles panel > Browse styles
• In your browser dev tools, inspect the editor iframe body ie. the body with CSS classes block-editor-iframe__body editor-styles-wrapper.
• Observe the body does have a CSS class is-dark-theme.
• Go to the Post editor.
• Observe the editor shows the theme variant with dark background.
• In your browser dev tools, inspect the editor iframe body ie. the body with CSS classes block-editor-iframe__body editor-styles-wrapper.
• If you inspect it very quickly, you will notice that initially the body element has these CSS classes: block-editor-iframe__body editor-styles-wrapper is-dark-theme.
• When the iframe is fully loaded, observe the element body element does not have the is-dark-theme class.
• Observe the body element CSS classes have been replaced with block-editor-iframe__body editor-styles-wrapper post-type-post admin-color-fresh wp-embed-responsive.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes