How to Customize the Background Color of WordPress Block Editor (Gutenberg)

Want to change the Gutenberg editor background color in WordPress to match the site branding colors and showcase the site culture. Detailed tutorial today it's here!

Why should I change the background color of the block editor in WordPress?

There are many reasons for wanting to change the background color. However, mostWordPress ThemesBoth use the same block editor background colors as the live site, including theAstra,OceanWP,GeneratePressetc.

However, if the WordPress theme doesn't use the same colors, the appearance of the post in the editor will not be the same as what the user sees on the live site.

It can also be modified to your liking.

For example, by default, the block editor uses a plain white background. Some users may find it a bit stressful to stare at a white screen for long periods of time. Eyestrain is uncomfortable for many people, and the default white background is not comfortable for the eyes.

How to Change WordPress Editor Background Color

This can be accomplished by sending a message to the subject'sfunctions.php fileAdd custom code to change the background color of the WordPress editor.

However, modifications to befunctions.php fileBeware, even the smallest error in the code can render a website inaccessible.

This is what many of our tutorials recommend usingWPCodeThe reason for the plugin. It is the best WordPress snippet plugin on the market today and the easiest and safest way to add custom code to your WordPress site.

First, install and activate the WPCode plugin.

Once activated, from the WordPress admin sidebar access theCode Snippet" + Add Code Snippet page.

From here, click "Add custom code (new code snippet)" under the option "Using code snippets"Button.

This will go into "Creating custom code snippets" page, where you can enter the name of the code snippet. This can be anything that helps to identify the code.

Next, from the drop-down menu in the upper right corner of the screen, select "PHP Snippet"as"code type".

After that, copy and paste the following code into "Code Preview" box:

add_action( 'admin_footer', function() {
    ? <style
    <style
        .editor-styles-wrapper {
            background-color: #bee0ec;
        }
    </style
    <?php
}).

When you're done, look for the following code in the PHP code snippet you just pasted:

	background-color: #bee0ec;

Then, the hex code of the preferred color must be added next to the background color option. If you do not want to use a hex code, then you can use some basic color name such as "fig. reactionary"or"blue (color)".

Note: The color names added here must be in English.

After that, scroll down to "stick"section and select "Auto-insertion"Options.

Next, from the drop-down menu, select the code snippet's "placement"for"Administrators only".

After that, go back to the top of the page and put "inactive"The switch toggles to "maneuver".

Finally, remember to click "Saving code snippets" button to save the changes.

The block editor is now accessible from the admin sidebar.

This is how the block editor appears on the site after adding the PHP code snippet.

If you want to change the background color of the front-end of your website, then you can do so by visiting the WordPress dashboard'sThe Appearance customization screen to make changes.

This will launch the theme customizer, click "Color and dark mode" tab. Note: The customizer may vary depending on the theme used.

A new panel will open in the sidebar, in which click "Select Color"Options.

Now, the color picker will open on the screen and you can select the preferred background color. Once selected, remember to click on the top "post"Button.

It is also possible to change the text color, highlight color, button color, etc. from the theme customizer. However, if you are using the
block theme, then these changes must be made in the full site editor.