Support and Documentation

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.

  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. For a detailed list of the types of fields you can define, see Data modeling.

  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; for details, see Upgrading a theme to new release.

  4. 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": {
      "type": "color",
      "cms.ui.placeholder": "#22b8e1"
    },
    "secondaryColor": {
      "type": "color",
      "cms.ui.placeholder": "#333333"
    }
  }
}

In the previous snippet—

  • Lines 3–6 define a field primaryColor.

  • Lines 7–10 define a field secondaryColor.

theme-overrides-tab.png

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.

. See also: