Brightspot CMS Developer Guide

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.) 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.

  1. In the theme’s configuration file _config.json, add a top-level key themeFields as an array.
  2. Add field definitions to the array.
  3. Update and deploy the theme by doing the following:

    1. Generate the theme’s zip file; in the theme’s directory, run gulp styleguide.
    2. Deploy the theme.
  4. Verify the new fields are available by opening Navigation Menu > Admin > Themes > (Theme Name) > Overrides tab.
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": { 
      "type": "color",
      "cms.ui.placeholder": "#22b8e1"
    },
    "secondaryColor": { 
      "type": "color",
      "cms.ui.placeholder": "#333333"
    }
  }
}
  • Defines a primary color.
  • Defines a secondary color.

Color fields displayed.png
Color fields displayed

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.

Previous Topic
Style variations
Next Topic
Swatches
Was this topic helpful?
Thanks for your feedback.