Skip to main content
Version: 8.3

Perspective Built-In Themes

Themes​

Perspective comes with several themes, providing initial styling to all components. The active theme in a session is determined by a session property. 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.

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.

Simple Light Theme Override Example
@import "../light/index.css";

:root {
  --customVariable: "value";
}
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.

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

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.

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

Built-in Theme Colors​

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

Variable Namelightlight-coollight-warmdarkdark-cooldark-warm
--neutral-10

#fafafa


#f2f4f8


#f7f3f2


#161616


#121619


#171414

--neutral-20

#f4f4f4


#dde1e6


#e5e0df


#323232


#21272a


#272525

--neutral-30

#d8d8d8


#c1c7cd


#cac5c4


#515151


#343a3f


#3c3838

--neutral-40

#bdbdbd


#a2a9b0


#ada8a8


#5e5e5e


#4d5358


#565151

--neutral-50

#a1a1a1


#878d96


#8f8b8b


#767676


#697077


#736f6f

--neutral-60

#767676


#697077


#736f6f


#a1a1a1


#878d96


#8f8b8b

--neutral-70

#5e5e5e


#4d5358


#565151


#bdbdbd


#a2a9b0


#ada8a8

--neutral-80

#515151


#343a3f


#3c3838


#d8d8d8


#c1c7cd


#cac5c4

--neutral-90

#323232


#21272a


#272525


#f4f4f4


#dde1e6


#e5e0df

--neutral-100

#161616


#121619


#171414


#fafafa


#f2f4f8


#f7f3f2

--seq-1

#ae74e8


#ae74e8


#ae74e8


#9659d6


#9659d6


#9659d6

--seq-2

#9659d6


#9659d6


#9659d6


#ae74e8


#ae74e8


#ae74e8

--seq-3

#7d3cbd


#7d3cbd


#7d3cbd


#c79bf2


#c79bf2


#c79bf2

--seq-4

#642b9e


#642b9e


#642b9e


#dabcf7


#dabcf7


#dabcf7

--seq-5

#4b2175


#4b2175


#4b2175


#ead9fa


#ead9fa


#ead9fa

--seq-6

#371c52


#371c52


#371c52


#f5f0fa


#f5f0fa


#f5f0fa

--div-1

#642b9e


#642b9e


#642b9e


#642b9e


#642b9e


#642b9e

--div-2

#7d3cbd


#7d3cbd


#7d3cbd


#7d3cbd


#7d3cbd


#7d3cbd

--div-3

#9656d6


#9656d6


#9656d6


#9656d6


#9656d6


#9656d6

--div-4

#ae74e8


#ae74e8


#ae74e8


#ae74e8


#ae74e8


#ae74e8

--div-5

#c79bf2


#c79bf2


#c79bf2


#c79bf2


#c79bf2


#c79bf2

--div-6

#dabcf7


#dabcf7


#dabcf7


#dabcf7


#dabcf7


#dabcf7

--div-7

#ead9fa


#ead9fa


#ead9fa


#ead9fa


#ead9fa


#ead9fa

--div-8

#f5f0fa


#f5f0fa


#f5f0fa


#f5f0fa


#f5f0fa


#f5f0fa

--div-9

#d7faf8


#d7faf8


#d7faf8


#d7faf8


#d7faf8


#d7faf8

--div-10

#83f2eb


#83f2eb


#83f2eb


#83f2eb


#83f2eb


#83f2eb

--div-11

#43ded3


#43ded3


#43ded3


#43ded3


#43ded3


#43ded3

--div-12

#21c2b7


#21c2b7


#21c2b7


#21c2b7


#21c2b7


#21c2b7

--div-13

#0ea197


#0ea197


#0ea197


#0ea197


#0ea197


#0ea197

--div-14

#08827a


#08827a


#08827a


#08827a


#08827a


#08827a

--div-15

#086962


#086962


#086962


#086962


#086962


#086962

--div-16

#09524d


#09524d


#09524d


#09524d


#09524d


#09524d

--qual-1

#7d3cbd


#7d3cbd


#7d3cbd


#9656d6


#9656d6


#9656d6

--qual-2

#229ad6


#229ad6


#229ad6


#53baed


#53baed


#53baed

--qual-3

#086962


#086962


#086962


#08827a


#08827a


#08827a

--qual-4

#b01355


#b01355


#b01355


#f78bb8


#f78bb8


#f78bb8

--qual-5

#f55353


#f55353


#f55353


#f55353


#f55353


#f55353

--qual-6

#661414


#661414


#661414


#faf0f0


#faf0f0


#faf0f0

--qual-7

#038537


#038537


#038537


#46e385


#46e385


#46e385

--qual-8

#114599


#114599


#114599


#5691f0


#5691f0


#5691f0

--qual-9

#ed5393


#ed5393


#ed5393


#ed5393


#ed5393


#ed5393

--qual-10

#cf7911


#cf7911


#cf7911


#e89c3f


#e89c3f


#e89c3f

--callToAction

#0c7bb3


#0c7bb3


#0c7bb3


#229ad6


#229ad6


#229ad6

--callToActionHighlight

#e8f4fa


#e8f4fa


#e8f4fa


#0c2938


#0c2938


#0c2938

--callToAction--hover

#229ad6


#229ad6


#229ad6


#0c7bb3


#0c7bb3


#0c7bb3

--callToAction--active

#066391


#066391


#066391


#53baed


#53baed


#53baed

--callToAction--disabled

#a1a1a1


#a1a1a1


#a1a1a1


#a1a1a1


#a1a1a1


#a1a1a1

--error

#de1b1b


#de1b1b


#de1b1b


#f55353


#f55353


#f55353

--info

#3272d9


#3272d9


#3272d9


#5691f0


#5691f0


#5691f0

--infoSecondary

#accbfc


#accbfc


#accbfc


#114599


#114599


#114599

--warning

#ad5f00


#ad5f00


#ad5f00


#cf7911


#cf7911


#cf7911

--warningSecondary

#f5bc76


#f5bc76


#f5bc76


#693d07


#693d07


#693d07

--success

#038537


#038537


#038537


#0aa648


#0aa648


#0aa648

--indicator

#1ec963


#1ec963


#1ec963


#1ec963


#1ec963


#1ec963

--indicatorOff

#0a2e18


#0a2e18


#0a2e18


#0a2e18


#0a2e18


#0a2e18

Last updated on by ia-nboehnke