Change Background and Text Colours in Gutenberg

August 14, 2019

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:

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.