Color is one of the primary components of design. You can create a theme that is dark and moody, fun and lighthearted, or clean and corporate. Which colors you choose will define how the world sees your theme, and WordPress provides a range of color-specific configuration options that you can set.
The settings.color property in theme.json gives you full control over how colors, gradients, and more work within your theme. Primarily, the goal is for configuring whether specific controls appear in the user interface, but it also lets you register custom presets that users can select.
Color settings
color is an object that’s nested directly within the top-level settings property in theme.json. It is used to configure multiple color-specific settings that appear in the user interface.
Take a look at the color property in the context of a theme.json file with its default values:
{
"version": 2,
"settings": {
"color": {
"background": true,
"custom": true,
"customDuotone": true,
"customGradient": true,
"defaultDuotone": true,
"defaultGradients": true,
"defaultPalette": true,
"duotone": [],
"gradients": [],
"link": true,
"palette": [],
"text": true
}
}
}As you can see, most of the settings accept a boolean value, meaning that you can set them to either true or false. Others, like duotone, gradients, and palette take an array of values. These are the ones where you can register custom presets, and you will learn how to create them in this doc.
Color settings can largely be broken down into four groups that let you:
- Enable or disable settings in the UI.
- Enable or disable user customizations of colors, duotones filters, and gradients.
- Enable or disable the core WordPress color, duotone, and gradient presets.
- Register custom color, duotone, and gradient presets.
In the following sections, you will learn how each of these work.
Text, background, and link settings
In the block editor, you will often see Text, Background, and Link settings under the Color panel for a block, at least for those blocks that opt into support of one or more of them.
These options appear like this in the interface:
