Understand extendable themes

Color schemes and Sizing options

All themes, predefined or custom, will consist of at least one "color scheme" and at least one "sizing option".

A color scheme defines all the named colors used within the app, such as primary , secondary , warning , label color , etc.

A sizing option defines the size of UI elements on a view within the app, such as font size , border-radius , padding , etc.

The platform provides two color schemes, namely light-colors and dark-colors and three sizing options, namely small , medium and large .

By default, an app will have two predefined themes, light and dark with each of these consisting of their respective color scheme and medium sizing.

Default Theme	Extends
light	light-colors , medium
dark	dark-colors , medium

Defining a new theme

New themes are defined (and existing themes are customized) in an app's config.json configuration file.

config.json

{
  "themes": [
    {
      "name": "admin",
      "colors": {
        "system": {
          "primary": "crimson"
        },
        "custom": {
          "admin-icon-color": "#546e7a"
        }
      }
    }
  ]
}

Note: By default, any custom theme that does not specify an extends field will extend light-colors and medium sizing.

Extending a theme

Define a new theme by extending one (or more) existing themes

config.json

{
  "themes": [
    {
      "name": "admin-dark",
      "extends": ["admin", "dark"]
    }
  ]
}

Note: The order of the extends property is important because themes get applied from left to right. In this example, the config of admin gets applied first and then extended by the dark theme.