How to change the color palette

Hi,

You can override the color palette by adding the code below inside the functions.php file of your child theme. You can either only change the variable values or completely change the array.

function my_child_theme_setup() {
	
	$black     = '#000000';
	$dark_gray = '#28303D';
	$gray      = '#39414D';
	$green     = '#D1E4DD';
	$blue      = '#D1DFE4';
	$purple    = '#D1D1E4';
	$red       = '#E4D1D1';
	$orange    = '#E4DAD1';
	$yellow    = '#EEEADD';
	$white     = '#FFFFFF';

	add_theme_support(
		'editor-color-palette',
		array(
			array(
				'name'  => esc_html__( 'Black', 'twentytwentyone' ),
				'slug'  => 'black',
				'color' => $black,
			),
			array(
				'name'  => esc_html__( 'Dark gray', 'twentytwentyone' ),
				'slug'  => 'dark-gray',
				'color' => $dark_gray,
			),
			array(
				'name'  => esc_html__( 'Gray', 'twentytwentyone' ),
				'slug'  => 'gray',
				'color' => $gray,
			),
			array(
				'name'  => esc_html__( 'Green', 'twentytwentyone' ),
				'slug'  => 'green',
				'color' => $green,
			),
			array(
				'name'  => esc_html__( 'Blue', 'twentytwentyone' ),
				'slug'  => 'blue',
				'color' => $blue,
			),
			array(
				'name'  => esc_html__( 'Purple', 'twentytwentyone' ),
				'slug'  => 'purple',
				'color' => $purple,
			),
			array(
				'name'  => esc_html__( 'Red', 'twentytwentyone' ),
				'slug'  => 'red',
				'color' => $red,
			),
			array(
				'name'  => esc_html__( 'Orange', 'twentytwentyone' ),
				'slug'  => 'orange',
				'color' => $orange,
			),
			array(
				'name'  => esc_html__( 'Yellow', 'twentytwentyone' ),
				'slug'  => 'yellow',
				'color' => $yellow,
			),
			array(
				'name'  => esc_html__( 'White', 'twentytwentyone' ),
				'slug'  => 'white',
				'color' => $white,
			),
		)
	);
}
add_action( 'after_setup_theme', 'my_child_theme_setup', 30 );

Hope that helps,
Tom

Thanks Tom

perfect

Great!

If you enjoy Twentig, please rate it. It would really help me out ??
Tom

It’s now even easier (I think from WordPress 5.8 only) to accomplish with the theme.json file (see https://developer.www.ads-software.com/block-editor/how-to-guides/themes/theme-json/)

I solved it like this:

{
    "version": 1,
    "settings": {
        "color": {
            "palette": [
                {
                    "name": "Black",
                    "slug": "black",
                    "color": "#000000"
                },
                {
                    "name": "Dark gray",
                    "slug": "darkgray",
                    "color": "#262626"
                },
                {
                    "name": "Gray",
                    "slug": "gray",
                    "color": "#DDDDDD"
                },
                {
                    "name": "Green",
                    "slug": "green",
                    "color": "#1F663D"
                },
                {
                    "name": "Lighter Green",
                    "slug": "lightgreen",
                    "color": "#4F9468"
                },
                {
                    "name": "Darker Green",
                    "slug": "darkgreen",
                    "color": "#003B16"
                },
                {
                    "name": "Aubergine",
                    "slug": "aubergine",
                    "color": "#661F48"
                },
                {
                    "name": "Lighter Aubergine",
                    "slug": "lightaubergine",
                    "color": "#964C73"
                },
                {
                    "name": "Darker Aubergine",
                    "slug": "darkaubergine",
                    "color": "#380021"
                },
                {
                    "name": "White",
                    "slug": "white",
                    "color": "#FFFFFF"
                },
                {
                    "name": "Opacity White",
                    "slug": "opacitywhite",
                    "color": "rgba(255,255,255,0.25)"
                }
            ]
        }
    }
}

Result:

Just would like to add that the solution here to use theme.json isn’t supported with twentig as explained in this thread. https://www.ads-software.com/support/topic/twentig-support-for-theme-json/

This solution changes the colour palette in the editor for me, but doesn’t change them in the live site! very strange.