Theme fields
All elements in the array themeFields
in a configuration file _config.json
appear as fields in a theme's Overrides widget. Designers and editors can use these fields to modify the theme applied to a site's published content. (In contrast, elements in the array fields
appear under a template's style variation, and apply only to that module; for details, see Data modeling.) Configuring themeFields
is useful if several of your published sites use a common theme, but each site has just a few elements requiring customization, such as colors or spacing.The array themeFields
enables Brightspot administrators to modify a theme's fields, overriding component-specific fields of the same name. This spares the developer from updating theme-specific or component-specific configuration files.
In the theme's configuration file
_config.json
, add a top-level keythemeFields
as an array.Add field definitions to the array. For a detailed list of the types of fields you can define, see Data modeling.
Update and deploy the theme by doing the following:
Generate the theme's zip file; in the theme's directory, run gulp styleguide.
Deploy the theme; for details, see Upgrading a theme to new release.
Verify the new fields are available by opening Navigation Menu > .
Tip
You can organize fields into groups using the key cms.ui.cluster.
The following snippet defines two fields appearing in a theme's Overrides widget.
{ "themeFields": { "primaryColor": { 1 "type": "color", "cms.ui.placeholder": "#22b8e1" }, "secondaryColor": { 2 "type": "color", "cms.ui.placeholder": "#333333" } } }

Referring to the previous illustration, when editors make selections in the Overrides widget, those selections apply throughout the theme. For example, every place where the theme uses Primary Color, the text appears in the color #22b8e1, a light blue. Designers can override this setting at the module level by redefining the associated color in a Less or CSS file.