Theme reference

This section contains information about the GBC infrastructure and its components that underpin the customization project you undertake.

Theme parts

A theme part can contain:

  • theme.config.json file (optional) which contains theme conditions.
  • theme.scss.json file (optional), which sets theme variables.
  • sass/ folder (optional), which can contain scss definitions such as themeVariables.scss and theme.scss.
  • resources/ folder (optional), which can contain resource files for the theme parts.

Theme parts are combined to produce runtime themes.

Themes

Theme parts are combined to produce runtime themes. The runtime themes are defined by one (and only one) of these files, listed here in the order of precedence:

  • The customization's config.json file.
  • A configuration build file specified by the gbc build option "--configuration".
  • The Genero Browser Client's custom.json file.
Important:

The first file with a defined array of themes determines the themes generated for the customization being built and theme arrays defined in files lower down in precedence are ignored.

If none of these files include theme definitions, or if these files do not exist, then a default set of themes are created. The default set of themes match those themes defined by the custom.json file at the time of installation.

The following is an example of a .json configuration build file which would create two themes – a Default theme and a High Contrast theme – as long as the sample theme did not have themes listed in its config.json file.
Note:

Comments have been added to assist your understanding; however, comments are not allowed in JSON files and errors would be thrown if you compile your GBC with the comments included in this example.

// sample: custombuild.json
// the compile section includes name/value pairs to specify the 
// mode of the build: dev, cdev, or prod
// and the customization to build by default
{
 "compile": {
   "mode": "cdev",
   "customization": "customization/sample"
 },
// The themes section is an array of theme definitions that
// include:
// name: the name of the theme
// title: the title displayed to the end user in the Settings dialog
// uses: an array of theme parts that make up the theme. This entry is optional;
// if not specified the theme part "platform/desktop" is used.
// conditions: an array of theme conditions. This entry is optional; theme
// conditions are typically specified in a theme part.
 "themes": [{
      "name": "default", 
      "title": "Default",
      "uses": ["platform/browser", "platform/desktop"]
   },
   {
     "name": "highcontrast",
     "title": "High contrast",
     "uses": ["platform/desktop", "colors/highcontrast"]
   }
 ]
}

Compilation overrides

Themes variables and resources are compiled in a deterministic way, so the order of theme parts in theme definitions is important.

  • Theme variables For a given theme, theme variables defined in the GBC codebase are superseded by customization overrides, then superseded by each theme part in order.

  • Resources GBC own resources and customization resources are considered global resources at runtime. Customization resources supersede GBC codebase ones. Each theme part can add or override resources, considered then as theme resources.

  • Theme conditions A theme or a theme part can declare conditions. At build time, these conditions are combined; the produced theme must fit all conditions possible in the execution context.