Thursday, September 22, 2022
The Great Tit
Updated: 22. 9. 2022, Added: 22. 9. 2022

Change Gutenberg Color Pallete to your own

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);
}
Did I help you? Fuel our WordPress journey
Beep this article to your friends!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram