Block Editor: theme.json – Color Palette
Add brand color palette to your Wordpress theme via theme.json for brandy buttons, callouts, headers, and more.
In adherence to our rigorous editorial policy, this article's content has undergone careful testing for accuracy and trustworthiness and hence, this content is marked source of information. View editorial history of this content.
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 cleancolor
– 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.
Digital Setups has enforced a strict sourcing policy. Every content piece published on our website is passed through strict editorial review for contextual correctness, communication ethics, and programmatic tests wherever required. Our team research solutions from only credible, authentic, and trustworthy sources. Learn more about our editorial process.
Based on our editorial policy, we update our content time to time to ensure its usefulness, reliability, and validity.
Our standardized editorial process ensures right, timely, and usefulness updates to our content. Your honest opinion drives significant improvement to our content. We appreciate you are taking time to share that.
Readers who read this also found these helpful:
- Unlock new cross-device capabilities & More with Google Signals
- Create XML Sitemap in WordPress without Plugin
- Stripe Alternatives in Pakistan – 2022 Update
- Strange. Do you also see people dancing here and there?
- Google Ads: Keyword Planner Tool – Easy & Powerful Guide
- Verify Company Registration Status of Any Country
- File Manager for WordPress Site on Digital Ocean Droplet
- Authorship in SEO (2022)
- Monetize Facebook Page with Google AdSense
- What is trademark infringement in digital business?