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