Color field type

The color field type allows editors to set the color of elements. It could be used for text color, backgrounds, or any other style that uses color.

Like the other theme editor fields, the color field is set up in the theme-styles.json or theme-settings.json file.

Below is a minimal configuration example.

{
    "name": "textColor"
    "label": "Text color",
    "type": "color"
}

Configuration

You configure the color field with the field properties in the theme JSON. Below is a list of available properties.

No results could be found. Please try a different search.

Property	Description
allowHex	Whether to allow the HEX color format. By default it is allowed. Allowed values are true, false, yes, and no.
allowHsl	Whether to allow the HSL color format. By default it is allowed. Allowed values are true, false, yes, and no.
allowPalette	Whether to allow the color palette to be used to set the color value. By default it is allowed. Allowed values are true, false, yes, and no.
allowRgb	Whether to allow the RGB color format. By default it is allowed. Allowed values are true, false, yes, and no.
alpha	Whether to allow the color to have some transparency. By default it is allowed. Allowed values are true, false, yes, and no.
defaultValue	The default value if the field doesn't already have a value. It should be a string value containing a valid color. For example #fff, #ff0000, or rgb(23, 32, 244).
description	A brief description for the field. This will show below the field label and above the field. It can contain HTML.
format	The output format for the selected color. By default the color will output in the format selected in the color picker. This will override that and force the output to be in a specific format. Allowed values are: hex hsl rgb
help	Some help content that will show when the help icon next to the field label is clicked. This can be used instead of the description value. It can contain HTML.
label	Required The field label text.
name	Required The name of the field.
render	How the field will be previewed in the theme editor and how it will be output in templates. See Previewing theme editor changes for more information.
required	Whether the field is required. Allowed values are true, false, yes, and no.
type	Required The field type. It's value should be color. This is what tells the system to output the field as a color field.