Is it possible to use a dark theme in the editor conditionally?

[cbirdsong]

I’m working on a custom non-FSE theme where posts have a light background, pages have a dark background, and there is a custom field to invert these defaults on a case-by-case basis. I want the block editor to at least roughly reflect what happens on the front end of the site, but I can’t figure out how to make it aware of this.

I’ve tried the following CSS, but whatever converts body to .editor-styles-wrapper is unaware of the concept of the body tag having classes.

body {
  color: black;
  background-color: white;
}
body.post-type-page {
  color: white;
  background-color: black;
}

I found #28233, which adds is-dark-theme to the body element, so I also tried adding is-dark-theme to the body myself via the admin_body_class filter, which that seems to be disallowed? It just doesn’t show up.

Is there a supported way to manually tell the editor what theme it should load based on the post type and/or a custom field?

[cbirdsong]

Update: Thanks to @MadtownLems for helping to figure out that you can do this¹, but:

• you have to specifically target .editor-styles-wrapper instead of body
• the styles must be added to the backend using wp_enqueue_style() instead of add_editor_style()
• it has to be done using something that isn't the wp_enqueue_scripts hook, like enqueue_block_assets or init, but fenced off with a conditional

If you manually target .editor-styles-wrapper with styles added using add_editor_style then that rule gets stripped out before the CSS is added to the backend, and if you add it using wp_enqueue_scripts then it doesn't work because that doesn't run in the backend, I think?

You can also add classes to the body using the admin_body_class hook and use those to target the color changes based on a custom field or taxonomy.

What worked for me, as of WP 6.1:

.editor-styles-wrapper {
    color: black;
    background-color: white;
}
body.post-type-page .editor-styles-wrapper {
    color: white;
    background-color: black;
}

function add_editor_theme_stylesheeet()
{
  if (is_admin()) {
    wp_enqueue_style("editor-theme", get_stylesheet_directory_uri() . "/dist/css/editor-theme.css");
  }
}
add_action("enqueue_block_assets", "add_editor_theme_stylesheeet");

This feels a bit hacky, so I would still like to know if there is a more recommended way to accomplish this.

Footnotes

1. This is for a classic theme with theme.json, I have no idea how this works for the site editor. ↩