Add dark editor style support

[jasmussen]

This fixes #6451.

This PR enables a new command to themers. They can now add add_theme_support( 'dark-theme' ); in order to ask the editing canvas to be friendly to dark themes.

What this does is add a body class to the editor, is-dark-theme, which enables already present color changes to the side UI and borders, that are friendly to dark themes.

To test, add a dark editor style, then enable support. For example, add this to your theme functions.php:

/**
 * Enqueue editor style in Gutenberg
 */

function navi_gutenberg_styles() {
	 wp_enqueue_style( 'navi-gutenberg', get_theme_file_uri( '/style-editor.css' ), false, '1.0', 'all' );
}
add_action( 'enqueue_block_editor_assets', 'navi_gutenberg_styles' );
add_theme_support( 'editor-styles' );
add_theme_support( 'dark-theme' );

In "style-editor.css", put the following:

/**
 * Editor style
 */

body.gutenberg-editor-page {
	background-color: #252526;
}

body.gutenberg-editor-page .editor-post-title__block,
body.gutenberg-editor-page .editor-post-title__input,
body.gutenberg-editor-page .editor-default-block-appender,
body.gutenberg-editor-page .editor-block-list__block {
	color: white;
}

Now test and see that the UI is usable.

Screenshots:

[tofumatt]

😎

[tofumatt]

Makes sense to me; just a tweak in the documentation requested from me.

[tofumatt]

It's not really "Inverting the UI colours", it's more "tweaking the editor styles to accommodate a darker UI". It's not a 1:1 inversion.

Right?

[jasmussen]

Correct, it's definitely not a 1:1 inversion. I will add a change, awesome.

Is https://github.com/WordPress/gutenberg/pull/9683/files#diff-26f7754641e020003bf92e16ac862f50R471 kosher, though? I mean it works solidly for me, just want to make sure, as I've never ever touched that file before.

[tofumatt]

Actually, come to think of it the docs should really include both add_theme_support( 'editor-styles' ); and add_theme_support( 'dark-theme' );, just for those who might be skimming the docs and not read above. I think that's fine…

The change itself makes sense to me, do you have a theme I can use to test it real quick? I don't have anything like that locally ^_^

[jasmussen]

I added the dark editor styles to https://github.com/jasmussen/navi, but I haven't pushed them so I sent the ones featuring copy pasta of the CSS above in a DM.

I'll make the docs change now.

[tofumatt]

Tested locally with a dark theme sent to me by @jasmussen. Works though I find the light sidebar/topbar UI a bit odd:

But I think that's unrelated. 🚢

[karmatosed]

I have to agree on the dark sidebar. I don't think we can tackle it but wow it really makes me want this to work throughout.

[karmatosed]

🕳[ couldn't find dark emoji so imagine this is a blackhole ]. 👍

[jasmussen]

Thanks for the reviews!

Important to note for passers by: this is not a dark theme for Gutenberg.

This PR enables UI to work on dark editor style backgrounds.

The difference here is that you can imagine any color background as defined by the WordPress theme in question. In this case, I picked a very dark gray at random.

[jasmussen]

🕳[ couldn't find dark emoji so imagine this is a blackhole ]. 👍

😂

[chrisvanpatten]

Would it be worth renaming this "dark canvas" instead of "dark theme" to avoid confusion with the editor's own theme?

[tofumatt]

"Dark canvas" sounds cool.

At any rate, sounds like this is doing the right thing, but it's sort of weird that dark canvas doesn't at least have some saner defaults. I get no styling has been done to the sidebar, but if that's how it looks unstyled we could do better.

But that can totally be a later issue. This isn't a super-high priority 🚢

[jasmussen]

Maybe actually "dark-editor-style"?

I understand the lightness of the UI, but I'm not sure the UI should be affected by the content. As in, if the UI it too bright when editing a post in a dark WordPress theme, should the WordPress theme affect the UI?

[tofumatt]

That works for me.

Generally I'm cool with the idea that theme content doesn't affect UI or with the idea that it can, but since this PR seems to allow the latter to a certain degree I say we just go for it and allow further UI adjustments. 🤷‍♂️

As mentioned though: can happen later, feel free to ship 😊

[jasmussen]

I appreciate your reviews quite a bit. Thank you. Have a good Sunday.