Would you like to modify the background color of the WordPress block editor for administrators?
In certain circumstances, while working on a customized client project, it may be desirable to change the background color of the Gutenberg editor in WordPress to align with their brand colors.
This article demonstrates a simple method to customize the background color of the WordPress block editor specifically for the admin area.
Motivation for Changing the Background Color of the Block Editor in WordPress There are multiple reasons why you might consider altering the background color of the WordPress block editor.
For instance, most modern WordPress themes utilize the same background color for the block editor as the live website, including Astra, OceanWP, GeneratePress, and others.
However, if your WordPress theme does not utilize the same color scheme, the appearance of your post within the editor will differ significantly from what your users see on the live website.
Another rationale for changing the background color could be personal preference.
By default, the block editor employs a plain white background. Some users may find it visually taxing to work with a white screen for prolonged periods. Eye strain can be a genuine concern for many individuals, and the default white background is not eye-friendly.
That being said, let us explore how you can easily modify the background color of the WordPress editor.
How to Modify the Background Color of the WordPress Editor
To change the background color of the WordPress editor, you can easily add custom code to the functions.php file of your theme.
However, it is important to note that even the slightest error in the code can result in website malfunctions or make it inaccessible. Therefore, we recommend using the WPCode plugin, which is the leading WordPress code snippets plugin available. It provides a simple and secure method to incorporate custom code into your WordPress website.
To begin, install and activate the WPCode plugin, which is available for free. For detailed instructions, please refer to our comprehensive guide on how to install a WordPress plugin.
After activation, navigate to the Code Snippets » + Add Snippets page in the WordPress admin sidebar.
On this page, click on the ‘Use Snippet’ button under the ‘Add Your Custom Code (New Snippet)’ section.
You will be directed to the ‘Create Custom Snippet’ page, where you can start by assigning a name to your code snippet. This name is for your reference and can be anything that helps you identify the code.
Next, select ‘PHP Snippet’ as the ‘Code Type’ from the dropdown menu on the right.
Then, copy and paste the provided code into the ‘Code Preview’ box.
Subsequently, locate the specific code within the PHP snippet that is mentioned below.