How to Customize the Background Color of WordPress Block Editor

There was a time when changing background colors in WordPress meant digging into code and hoping nothing broke. We remember those days well. WordPress has come a long way since then, and the block editor has made customization easier than ever.

Still, many website owners struggle to get their background colors looking just right.

After running multiple WordPress sites and helping thousands of users, we’ve learned the simplest and most reliable ways to handle these changes.

In this guide, we’ll show you exactly how to change background colors in the WordPress block editor using methods that work for any theme and skill level.

Why Change the Background Color of the Block Editor in WordPress?

You may want to change the background color of the WordPress block editor for a number of reasons.

For example, most modern WordPress themes use the same background color for the block editor as the live website, including OceanWP, GeneratePress, and more.

However, if your WordPress theme doesn’t use the same colors, then the appearance of your post inside the editor will look quite different from what your users will see on the live website.

Another reason might simply be your personal comfort.

If you spend many hours writing, staring at a bright white screen can be tough on the eyes. Changing the editor’s background to a softer color can make your work time much more pleasant.

That being said, let’s see how you can easily change the WordPress editor background color.

How to Change the WordPress Editor Background Color

You can change the WordPress editor background color by adding custom code to your theme’s functions.php file.

However, even the smallest error in the code can break your website and make it inaccessible.

That’s why we recommend using the WPCode plugin.

After thorough testing, we have concluded that it is the easiest and safest way to add custom code to your WordPress website. To learn more, see our WPCode review.

First, you need to install and activate the WPCode plugin. For more instructions, please see our step-by-step guide on how to install a WordPress plugin.

Upon activation, visit the Code Snippets » +Add Snippet page from the WordPress admin sidebar.

From here, click on the ‘Use Snippet’ button under the ‘Add Your Custom Code (New Snippet)’ option.

This will take you to the ‘Create Custom Snippet’ page, where you can start by typing a name for your code snippet. This is just for you and can be anything that will help you identify the code.

Next, select ‘PHP Snippet’ from the prompt that appears after clicking the ‘Code Type’ menu in the top-right corner of the screen

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

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

This code snippet does two simple things. The add_action part tells WordPress to add our custom styling to the admin area’s footer.

Inside that, the CSS code targets the block editor’s main container (.editor-styles-wrapper) and sets its background-color to a new hex code.

Once you have done that, look for the following code in the PHP snippet you just pasted:

background-color: #bee0ec;

Then, you have to add the hex code of your preferred color next to the background color option.

If you don’t want to use a hex code, you can use some basic color names, such as ‘white’ or ‘blue’ instead.

After that, scroll down to the ‘Insertion’ section and choose the ‘Auto Insert’ option.

Next, you must select the ‘Location’ of the code snippet as ‘Admin Only’ from the dropdown menu.

After that, go back to the top of the page and toggle the ‘Inactive’ switch to ‘Active.’

Finally, don’t forget to click on the ‘Save Snippet’ button to store your changes.

Now, go visit the block editor from the admin sidebar.

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

Video Tutorial

If you would rather watch a video, check out our YouTube tutorial on how to customize the background color of the WordPress block editor:

Bonus Method: Change the Background Color on Your Live Website

If you want to change the background color that your visitors see on your live website, the method will depend on your WordPress theme.

WordPress has two types of themes: classic themes and newer block themes. We’ll show you both ways.

Method 1: Using the Theme Customizer (For Classic Themes)

Most classic themes use the Theme Customizer for color changes. You can get there by navigating to Appearance » Customize from your WordPress dashboard.

Once the Customizer loads, look for a section labeled ‘Colors,’ ‘Colors & Dark Mode,’ or something similar. The exact name and location of these settings can vary from theme to theme.

Inside, you should find an option for ‘Background Color’ that will let you use a color picker to make your changes. When you’re happy with the result, just click the ‘Publish’ button to save.

Method 2: Using the Full Site Editor (For Block Themes)

If you are using a modern block theme, you’ll make these changes in the Full Site Editor. To access it, go to Appearance » Editor in your admin sidebar.

In the editor, click on the ‘Styles’ icon on the right-hand side (it looks like a circle that’s half-filled). This will open the global styles panel.

From here, click on ‘Colors’ and then select the ‘Background’ option.

You can now choose a new background color for your entire site. The editor will show you a live preview, and you can click ‘Save’ when you’re done.

For a more detailed walkthrough on both methods, you can see our beginner’s guide on how to customize colors on your WordPress website.

Frequently Asked Questions About Changing the Editor Background

Here are some questions that our readers frequently ask about changing the background color of the WordPress editor:

Will this code snippet slow down my website?

No, this specific code will not slow down your website. Because we set the WPCode snippet to only load in the ‘Admin Only’ area, it doesn’t add any extra code to the front end of your site. It only loads for logged-in users who are actively using the block editor.

Can I use a gradient or an image for the editor background instead of a solid color?

Yes, you can. It requires a small change to the CSS code. Instead of background-color, you would use the background property.

For example, to add a simple linear gradient, your CSS inside the snippet might look like this:

.editor-styles-wrapper { background: linear-gradient(to right, #e6dada, #274046); }

You can use online CSS gradient generators to create more complex styles.

The code didn’t work. What should I check first?

If the color isn’t changing, first double-check the settings in your WPCode snippet. Make sure the toggle at the top is set to ‘Active’ and that the Insertion location is set to ‘Admin Only’.

Also, check the code itself for any typos, especially in the CSS selector (.editor-styles-wrapper) and the hex color code.

How do I find the hex code for a specific color I want to use?

The easiest way is to use an online color picker tool. Websites like Google’s Color Picker, HTML Color Codes, or Adobe Color allow you to visually select any color. They will instantly provide you with the correct hex code (e.g., #1a457c) to copy and paste into the code snippet.

If I update my theme, will I lose the block editor background color change?

No, you will not lose the change. That’s the biggest advantage of using a plugin like WPCode instead of editing your theme’s functions.php file directly. The code snippet is saved independently of your theme, so it will continue to work even after theme updates.

We hope this article helped you learn how to easily change the WordPress editor background color. You may also want to see our ultimate guide on how to disable the fullscreen editor in WordPress, or take a look at our top picks for the best Gutenberg blocks plugins for WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.