Add dark editor style support (#9683)

* Add dark editor style support

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.

* Update documentation.

* Update theme support docs.

* Use dark-editor-style instead.

Hopefully this will help prevent confusion.

docs/extensibility/theme-support.md

@@ -209,6 +209,15 @@ function mytheme_block_editor_styles() {
 add_action( 'enqueue_block_editor_assets', 'mytheme_block_editor_styles' );
 ```
 
+If your editor style relies on a dark background, you can add the following to adjust the color of the UI to work on dark backgrounds:
+
+```php
+add_theme_support( 'editor-styles' );
+add_theme_support( 'dark-editor-style' );
+```
+
+Note you don't need to add `add_theme_support( 'editor-styles' );` twice, but that rule does need to be present for the `dark-editor-style` rule to work.
+
 ### Basic colors
 
 You can style the editor like any other webpage. Here's how to change the background color and the font color to blue:

gutenberg.php

@@ -468,6 +468,10 @@ function toggleDropdown() {
  * @return string The $classes string, with gutenberg-editor-page appended.
  */
 function gutenberg_add_admin_body_class( $classes ) {
-	// Default to is-fullscreen-mode to avoid jumps in the UI.
-	return "$classes gutenberg-editor-page is-fullscreen-mode";
+	if ( current_theme_supports( 'editor-styles' ) && current_theme_supports( 'dark-editor-style' ) ) {
+		return "$classes gutenberg-editor-page is-fullscreen-mode is-dark-theme";
+	} else {
+		// Default to is-fullscreen-mode to avoid jumps in the UI.
+		return "$classes gutenberg-editor-page is-fullscreen-mode";
+	}
 }