How to add a cusntomized accent color?

Hi @freezhao,

You can register additional colors using the after_setup_theme action and calling add_theme_support( 'editor-color-palette', array() );. You can see an example in the functions.php file in the Koji functions.php file.

— Anders

Thanks, Anders!
I copy and paste the code from functions.php

if ( ! function_exists( 'koji_add_gutenberg_features' ) ) :
	function koji_add_gutenberg_features() {


		/* Gutenberg Palette --------------------------------------- */

		add_theme_support( 'editor-color-palette', array(
			array(
				'name' 	=> _x( 'XXXX', 'Name of the XXXX color in the Gutenberg palette', 'koji' ),
				'slug' 	=> 'XXXX',
				'color' => '#232D37',
			),

		) );

	}
	add_action( 'after_setup_theme', 'koji_add_gutenberg_features' );
endif;

and I have add code into style.css

/*--------add customized color in palette--------*/
:root .has-fgreen-color { color:  #XXXXXX;; }
:root .has-fgreen-background-color { background-color:  #XXXXXX;; }
}

It finally works. I do not know whether it is the smartest solution, hope it may helps others.

A further question: is there any way to only add a accent color in child-theme, but not overwirte them?

Thanks again for your quick and helpful reply! If there is better way to solve it please point it out.

• This reply was modified 1 year, 7 months ago by FREEZhao.
• This reply was modified 1 year, 7 months ago by FREEZhao.

Hi @freezhao,

By including a function called koji_add_gutenberg_features, you replace the function with the same name in Koji itself and cause those colors to disappear.

Rename your function to something else (you can do a search and replace to make sure you hit all of them), and you should be able to add colors without replacing those in the parent theme.

— Anders