How to Disable Custom Colors in Gutenberg

Updated: April 11, 2022

When editing a content with Gutenberg — be it a post or page — you can set the color of elements like text and button. You can find the color setting on the Block tab on the settings panel of Gutenberg. There are several predefined/default colors you can find here. These colors are defined by the theme developer so you will find different default colors on each WordPress theme. If none of these default colors suit you, you can use a different color by selecting a custom color.

While custom color is great when it comes to color selection (as you can pick any color you like), you might doesn’t need it for a multi-user site. Instead, you might want all users on your website to use the colors you have defined for the sake of maintaining your brand identity. If this is the case, you can disable custom color so that users on your website can’t pick a color other than the default colors.

How to Disable Custom Colors in Gutenberg

Custom color is a WordPress feature that is enabled by default in most WordPress themes. If you don’t need it this feature, you can disable it by editing the functions.php file of your theme. First, login to your WordPress dashboard and go to Appearance -> Theme File Editor. Make sure the active theme is selected, then select the functions.php file on the right panel to edit it.

Add the following snippet to the functions.php file content

add_theme_support('disable-custom-colors');

You can place the snippet above right after the last line of the functions.php content. Here is the example of the placement.

Make sure to click the Update File button after adding the snippet above.

If everything goes well, you should not see the custom color picker anymore on Gutenberg.

The Bottom Line

In Gutenberg, you have options to set the color or text, button, block background, and several other elements. The default color options are varied on each theme as the default colors are defined by theme developer. Instead of giving your users a freedom to choose their own colors via custom color picker, you can force them to use the predefined colors to maintain your brand identity. You can disable the custom color picker by editing the functions.php file of your theme as we have covered above.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Reply

Your email address will not be published.

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Scroll to Top

It's a minute already. Thanks for staying

Subscribe to get regular articles about page builder plugins and WordPress in general