Visual Editor Background

You can either create a plugin or a child theme. Since the black background on your site is most likely coming from a theme, a child theme seems like a good fit here – so if you ever changed your theme, the black background in the Editor would also go away.

To create a child theme, all you have to do is make a new folder inside wp-content/themes/ – name it something like black-background. Then put a style.css file in the folder with two comments:

/*
Theme Name: Black Background
Template: parent-theme-folder
*/

You will need to change the template (“parent-theme-folder”) to the folder name of your current theme. So if you were using Twenty Twenty, you would change the third line to Template: twentytwenty.

Now you have a child theme you can activate, but it doesn’t do anything. So you’re going to need two more files. Here is a one-line editor.css file for your child theme folder that will set the Editor background to black:

div.editor-styles-wrapper { background:#000; }

And finally, to tell WP to include that file in the Editor, create a functions.php file in your child theme folder:

<?php
add_action( 'enqueue_block_editor_assets', 'wpse_enqueue_block_editor_style' );
function wpse_enqueue_block_editor_style() {
    wp_enqueue_style( 'black-background', get_stylesheet_directory_uri() . '/editor.css', array( 'wp-edit-blocks' ), '1.0' );
}
?>

This tells WP that when it gets to the hook for enqueueing Block Editor assets – meaning this will only happen when WP is setting up the Block Editor – it needs to find editor.css in your child theme, call it “Black Background,” and make sure it is loaded after the wp-edit-blocks stylesheet to ensure it overrides Core styling.