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.

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"
    }
  }
}

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.