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

{% code title="config.json" %}

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

{% endcode %}

**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

{% code title="config.json" %}

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

{% endcode %}

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