Just revamped. Got feedback? Share now.
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.
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: 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 cleancolor
– required – color code including hash symbol (#)name
– optional – human readable name for the colorFollow 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.
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.
100K+ readers have already joined the lists of their choice. Will you? Just now, maybe?
Pick List(s) to Subscribe