Change Background and Text Colours in Gutenberg

Building a custom website for a client or a friend, it might be easier to setup the site / brand colours as the defaults available in the Colour Settings dropdown.

Add the following the functions.php and update the colours and labels according to your needs. The array blocks can be removed / added as necessary.

// Adds support for editor color palette.
add_theme_support( 'editor-color-palette', array(
	array(
		'name'  => __( 'Dark Grey', 'relish-brand' ),
		'slug'  => 'dark-grey',
		'color'	=> '#707070',
	),
	array(
		'name'  => __( 'Light Grey', 'relish-brand' ),
		'slug'  => 'light-grey',
		'color'	=> '#C7C0C0',
	),
	array(
		'name'  => __( 'White', 'relish-brand' ),
		'slug'  => 'white',
		'color'	=> '#ffffff',
	),
	array(
		'name'  => __( 'Dark Blue', 'relish-brand' ),
		'slug'  => 'dark-blue',
		'color'	=> '#00B1CD',
	),
	array(
		'name'  => __( 'Light Blue', 'relish-brand' ),
		'slug'  => 'light-blue',
		'color'	=> '#EDF5F7',
	),
) );

The above snipped returns the following in the backend:

custom gutenberg colour palette

Optionally, you can remove the custom colour picker:

add_theme_support( 'disable-custom-colors' );

Set styles in your block editor stylesheet with the chosen slugs as follows:

.has-dark-grey-color {color: #707070;}
.has-light-grey-color {color: #C7C0C0;}
.has-white-color {color: #fff;}
.has-dark-blue-color {color: #00B1CD;}
.has-light-blue-color {color: #EDF5F7;}

.has-dark-grey-background-color {background-color: #707070;}
.has-light-grey-background-color {background-color: #C7C0C0;}
.has-white-background-color {background-color: #fff;}
.has-dark-blue-background-color {background-color: #00B1CD;}
.has-light-blue-background-color {background-color: #EDF5F7;}

Source.

Leave a Reply

katherine as a flat graphic icon

About Me

I’m an African / Ojibwe First Nations Web Developer living in Winnipeg, Manitoba.

Visit the Tips and Blog to see what I’m working on.