Aleš Sýkora / November 28, 2023 / 0 comments

Change Gutenberg Color Pallete to your own

Post summary: If you want to have your theme colors in Gutenberg instead of all colors use this code. You can also disable gradients in Gutenberg editor. Add this code to your functions.php or custom plugin or code snippets plugin like Advanced scripts. Add more colors if you want 🙂 just change the name (Zelená,Modrá…). You also…

If you want to have your theme colors in Gutenberg instead of all colors use this code. You can also disable gradients in Gutenberg editor. Add this code to your functions.php or custom plugin or code snippets plugin like Advanced scripts.

Add more colors if you want 🙂 just change the name (Zelená,Modrá…).

<?php

/**
 * Add custom color palette in Block editor.
 */
function gt_gutenberg_colors() {
	add_theme_support(
		'editor-color-palette', array(
			array(
				'name'  => esc_html__( 'Zelená', '@@textdomain' ),
				'slug' => 'green',
				'color' => '#009846',
			),
			array(
				'name'  => esc_html__( 'Modrá', '@@textdomain' ),
				'slug' => 'blue',
				'color' => '#1464b4',
			),
			array(
				'name'  => esc_html__( 'Světle modrá', '@@textdomain' ),
				'slug' => 'accent',
				'color' => '#eff4f7',
			),
			array(
				'name'  => esc_html__( 'černá', '@@textdomain' ),
				'slug' => 'base',
				'color' => '#000000',
			)
		)
	);
}
add_action( 'after_setup_theme', 'gt_gutenberg_colors' );

You also need to add the color classes which will be generated by Gutenberg to your CSS. Again – change the names to be same as slugs of the colors.

/**************************/
/*****GUTENBERG-COLORS*****/
/**************************/

/*use HEX colors if you don't have variables in your stylesheet*/
.has-green-background-color {
     background-color: var(--secondary); 
 }
.has-green-color {
     color: var(--secondary);
}
.has-blue-background-color {
     background-color: var(--primary);
}
.has-blue-color {
     color: var(--primary);
}
.has-accent-background-color {
     background-color: var(--accent);
}
.has-accent-color {
     color: var(--accent);
}
.has-base-background-color {
     background-color: var(--base);
}
.has-base-color {
     color: var(--base);
}

Fuel my passion for writing with a beer🍺

Your support not only makes me drunk but also greatly motivates me to continue creating content that helps. Cheers to more discoveries and shared success. 🍻

0 comments

Share Your Thoughts