3

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: enter image description here

1
  • 1
    This is likely the product of the theme you are using opting in to use the editor-styles theme feature. It would be good to raise this issue with the theme author such that they can update it to fix the problem for all users.
    – bosco
    Jun 26, 2021 at 20:38

1 Answer 1

2

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.

1
  • 1
    Note, you have an Elementor button in your screen shot, and if you're using Elementor on these particular pages you may need different CSS to target it. This code will work on the standard Block Editor built into WP Core.
    – WebElaine
    Jun 24, 2021 at 13:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.