Block Editor: theme.json – Color Palette

This content is marked source of information.

Color Palette gives the authors and editors use consistent and brand specific colors to style block elements. Using color palette is great to style brandy callouts, buttons, and texts. With theme.json, you can define default color palette.

There are 2 steps to register color palette for your theme.

Step 1: Prepare Color Shades to Register

Prepare a list of colors to register in your color palette. Give a unique name to each color as color shade identification. Lets say you got some brand colors in your color palette.

Step 2: Add Colors in Palette Settings in theme.json

Step 2: Either register color palette globally for all blocks or you can register it for individual blocks. In theme.json, within settings option, add a new color property and within that add a new palette property. The palette property accepts an array of arrays. For each color, add a new array having the following three properties for each color.

• slug – required – unique name of the color, avoid spaces, keep it clean
• color – required – color code including hash symbol (#)
• name – optional – human readable name for the color

Follow the following code pattern for theme.json to add color palette settings.

{
	"version": 2,
	"settings" : {
		"appearanceTools": true,
		"color": {
			"palette": [
				{
					"slug": "dark-blue",
					"color": "#112b4b",
					"name": "Dark Blue"
				},
				{
					"slug": "light-blue-shade",
					"color": "#f6f8fc",
					"name": "Light Blue Shade"
				},
				{
					"slug": "alternate-blue",
					"color": "#055095",
					"name": "Alternate Category Chip Blue"
				},
				{
					"slug": "theme-red",
					"color": "#750c0c",
					"name": "Theme Red"
				},
				{
					"slug": "theme-alternate-grey",
					"color": "#f4f4f4",
					"name": "Theme Alternate Grey"
				},
				{
					"slug": "highlight-text",
					"color": "#f5f5dc",
					"name": "Highlight Text"
				},
				{
					"slug": "error-warning-text",
					"color": "#ffdbdb",
					"name": "Red Warning Text"
				},
				{
					"slug": "info-text",
					"color": "#d9f7ff",
					"name": "Info Text"
				},
				{
					"slug": "success-text",
					"color": "#c6f1d6",
					"name": "Success Text"
				}
			]
		}
	}
	
}

Save the file. Refresh the editor page in the backend. Add any block and select the element to apply text or background color. The added colors are now there. Cheers!

Try adding block patterns via theme.json too. They are great to let authors pick the ready-made brand specific layouts easily.