---
title: "Perspective Built-In Themes"
---

# Perspective Built-In Themes

> Perspective comes with several themes, providing initial styling to all components. The active theme in a session is determined by a [session property](ignition-modules\perspective\perspective-sessions\session-properties.md#session-properties-table). Specifically, `session.props.theme` found on the home screen of the Perspective workspace. Changing the value of this property in a Perspective Session will change the active theme for the session.

## Themes

### Initial Theme

Ignition installations come with the following themes:

**Base**
- light
- dark

**Derived**
- light-warm
- light-cool
- dark-warm
- dark-cool

Built-in themes are considered system collection resources, which means the best way to view any theme files or definitions is by using API Keys. The API endpoints for Perspective Themes are located in the OpenAPI docs at `<gateway_address>/openapi#tag/config-perspective-themes`. 

For instance, you can view the config for the light theme by using the GET endpoint at `/data/api/v1/resources/find/com.inductiveautomation.perspective/themes/light`. It is also possible to define your own variable or make modifications to the built-in theme files, using the Modify or Create API endpoints. 

#### Built-in Theme Modifications

**Derived Themes**

The derived themes, like light-cool and dark-cool, can be modified freely. Be aware that changes to these built-in themes will remain overridden through restarts and upgrades, so any updates from Inductive Automation will not be applied. For this reason, it is highly recommended that you create custom themes with their own entry point and various CSS files.

**Base Themes**

Both the light and dark themes are system config resources. This means that they can't be altered. The only way to override light and dark, is to create a `overrides-[light | dark]` theme resource. If an override resource is present, Ignition will redirect the entry point of the light or dark theme to the entry point of the `overrides-light` or `overrides-dark` theme resource accordingly. The `overrides-[light | dark]/index.css` file should contain one or several import statements that import CSS from the light/dark theme. A simple and complex example are included below to demonstrate this structure. 

```python title="Simple Light Theme Override Example"
@import "../light/index.css";

:root {
  --customVariable: "value";
}
```

```python title="Complex Light Theme Override Example"
@import "./variables.css";
@import "../light/fonts.css";
@import "./globals.css";
@import "../light/app/index.css";
@import "../light/common/index.css";
@import "../light/designer/index.css";
@import "../light/palette/index.css";
```

Note that when creating an `overrides` theme resource, the theme config property `isPrivate` is set to **true** in order to hide the theme from themes list.

```python title="POST Payload Example"
[
  {
    "name": "overrides-light",
    "collection": "core",
    "enabled": true,
    "description": "Overrides light theme.",
    "config": {
      "entrypoint": "index.css",
      "isPrivate": true
    }
  }
]
```

Refer to the [Creating and Using Custom Perspective Themes](../creating-and-using-custom-perspective-themes.md) page for more information on theme customization.

## Theme Colors

The built-in themes make heavy use of CSS variables for colors. Colors are defined in a default theme `variables.css` file. They are also listed below in the [Built-in Theme Colors](#built-in-theme-colors) table. 

Theme colors can be used on components by simply providing the variable name. For example, we can change the **backgroundColor** and **color** of a Button component by stating the variable name for the appropriate styling properties on the component's **style** object.

![](perspective-built-in-themes/image2020-7-6_14-35-58_20_281_29.png)

If a component has a **color** property outside of a style object, such as the Icon component, the same rules apply; simply set the value of the color property to the name of the variable.

![](perspective-built-in-themes/image2020-7-6_15-14-53_20_281_29.png)

### Style Classes

When using a Theme Color in a Style Class, the variable must be wrapped in the `var()` method. So, the `--seq-4` variable would be entered as `var(--seq-4)`.

![](perspective-built-in-themes/image2020-7-6_16-15-30_20_281_29.png)

### Built-in Theme Colors

The following color swatch represents the built-in color variables for each Inductive Automation provided theme.

    
        
            Variable Name
            light
            light-cool
            light-warm
            dark
            dark-cool
            dark-warm
        
    
    
        
            --neutral-10
            
            
            
            
            
            
        
        
            --neutral-20
            
            
            
            
            
            
        
        
            --neutral-30
            
            
            
            
            
            
        
        
            --neutral-40
            
            
            
            
            
            
        
        
            --neutral-50
            
            
            
            
            
            
        
        
            --neutral-60
            
            
            
            
            
            
        
        
            --neutral-70
            
            
            
            
            
            
        
        
            --neutral-80
            
            
            
            
            
            
        
        
            --neutral-90
            
            
            
            
            
            
        
        
            --neutral-100
            
            
            
            
            
            
        
        
            --seq-1
            
            
            
            
            
            
        
        
            --seq-2
            
            
            
            
            
            
        
        
            --seq-3
            
            
            
            
            
            
        
        
            --seq-4
            
            
            
            
            
            
        
        
            --seq-5
            
            
            
            
            
            
        
        
            --seq-6
            
            
            
            
            
            
        
        
            --div-1
            
            
            
            
            
            
        
        
            --div-2
            
            
            
            
            
            
        
        
            --div-3
            
            
            
            
            
            
        
        
            --div-4
            
            
            
            
            
            
        
        
            --div-5
            
            
            
            
            
            
        
        
            --div-6
            
            
            
            
            
            
        
        
            --div-7
            
            
            
            
            
            
        
        
            --div-8
            
            
            
            
            
            
        
        
            --div-9
            
            
            
            
            
            
        
        
            --div-10
            
            
            
            
            
            
        
        
            --div-11
            
            
            
            
            
            
        
        
            --div-12
            
            
            
            
            
            
        
        
            --div-13
            
            
            
            
            
            
        
        
            --div-14
            
            
            
            
            
            
        
        
            --div-15
            
            
            
            
            
            
        
        
            --div-16
            
            
            
            
            
            
        
        
            --qual-1
            
            
            
            
            
            
        
        
            --qual-2
            
            
            
            
            
            
        
        
            --qual-3
            
            
            
            
            
            
        
        
            --qual-4
            
            
            
            
            
            
        
        
            --qual-5
            
            
            
            
            
            
        
        
            --qual-6
            
            
            
            
            
            
        
        
            --qual-7
            
            
            
            
            
            
        
        
            --qual-8
            
            
            
            
            
            
        
        
            --qual-9
            
            
            
            
            
            
        
        
            --qual-10
            
            
            
            
            
            
        
        
            --callToAction
            
            
            
            
            
            
        
        
            --callToActionHighlight
            
            
            
            
            
            
        
        
            --callToAction--hover
            
            
            
            
            
            
        
        
            --callToAction--active
            
            
            
            
            
            
        
        
            --callToAction--disabled
            
            
            
            
            
            
        
        
            --error
            
            
            
            
            
            
        
        
            --info
            
            
            
            
            
            
        
        
            --infoSecondary
            
            
            
            
            
            
        
        
            --warning
            
            
            
            
            
            
        
        
            --warningSecondary
            
            
            
            
            
            
        
        
            --success
            
            
            
            
            
            
        
        
            --indicator
            
            
            
            
            
            
        
        
            --indicatorOff