Skip to main content
Version: 8.1

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

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. Defining your own variable is simple. Add a line with the following to the variables file:

--variable-name: #FF0000;
caution

Be aware that changes made to the built-in theme files will be replaced on Gateway start up (including restarts caused by a Gateway Restoration) and moved to a backup folder on upgrade. As a result, it is highly recommended that you create a custom CSS file that can then be imported into the entry point CSS files.

For more information, see the markdown README file located in the Gateway's installation directory: %installDirectory%\data\modules\com.inductiveautomation.perspective\themes\README.md

Using Theme Colors​

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