• 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 6 replies - 1 through 6 (of 6 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

    Just would like to add that the solution here to use theme.json isn’t supported with twentig as explained in this thread. https://wordpress.org/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.

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