Skip to main content
Version: 8.3 Beta 🚧

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:

  • light
  • dark
  • 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.

caution

Be aware that changes to built-in themes will remain overridden through restarts and upgrades, so any updates from IA 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.

Theme Colors​

The built-in themes make heavy use of CSS variables for colors. For any of the default themes, colors are defined in the variables.css file.

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 just 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, as shown below.

Built-in Theme Colors​

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

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