• Resolved chzumbrunnen

    (@chzumbrunnen)


    Is it possible to change the themes color palette that is used by the block editor in a child theme?
    If so how do I do this?

    I see the definitions in the functions.php but don’t know how to overwrite itr.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Twentig

    (@twentig)

    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

    Thread Starter chzumbrunnen

    (@chzumbrunnen)

    Thanks Tom

    perfect

    Plugin Author Twentig

    (@twentig)

    Great!

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

    Thread Starter chzumbrunnen

    (@chzumbrunnen)

    It’s now even easier (I think from WordPress 5.8 only) to accomplish with the theme.json file (see https://developer.wordpress.org/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:
    2021-07-18_13-43-02.png

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.