Just revamped. Got feedback? Share now.

Privacy
Subscribe

Block Editor: theme.json – Color Palette

By Aqsa Jamil Published 22 Nov, 2022 Modified 22 Nov, 2022 Viewed 92 times Read in 1m 41s
Experience Based
Content Validity: Valid and Applicable Comprehension: Level 2 – For Professionals

Add brand color palette to your Wordpress theme via theme.json for brandy buttons, callouts, headers, and more.

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.

  • slugrequired – unique name of the color, avoid spaces, keep it clean
  • colorrequired – color code including hash symbol (#)
  • nameoptional – 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.

×

Your feedback matters.

Our standardized editorial process ensures right, timely, and healthy updates to our content. Your honest opinion drives significant improvement to our content. We appreciate you are taking time to share that.

×