Visual Editor Background

Question

I have a WordPress site in which the background colour is black and the text is white. The site is fine, but it's a real pain trying to edit content in the visual editor as the background is white and it is the same colour as the text.

so, How do I change the background colour of the visual editor to black or any other colour so that the content can be automatically readable if the text colour is to be white, because my normal page shows the dark colour in the background, but when I am doing a post, it is coming to be very painful that I don't need to change it every time ...

see image:

Answer 1

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.