Site Editor: is-dark-theme class is not applied correctly

[t-hamano]

Description

The block editor determines if it is a dark theme based on the canvas background color via useDarkThemeBodyClassName and grants the is-dark-theme class. However, when changing the background color from the global style or changing the theme variation, the previous background color is referenced and this class is not given correctly.

As a result, components that depend on this class will not be displayed in the correct color.

Step-by-step reproduction instructions

• Open the site editor.
• Make sure that the .is-dark-theme class is not added to the body tag in the iframe.
• Insert a spacer block in one of the templates.
• Confirm that the background color changes to gray when the spacer block is selected. This is the style for non-dark themes.

• From the Global Style menu, apply black to the background color.
• Confirm that the .is-dark-theme class is not added to the body tag, even though it is considered a dark theme.

• Reset the background color from the global style menu.
• The .is-dark-theme class is unintentionally added to the body tag. As a result, the background color for the dark theme is applied to the spacer block, making it invisible.

[t-hamano]

This issue will not be reproduced in the latest Gutenberg and will be closed. Instead, it appears that a similar issue is occurring in the post editor: #60299