Search

User Manual

GETTING STARTED


MODULES AND PLATFORM


APPENDIX


TUTORIALS & HELPFUL TRICKS


STRATEGIC PARTNER LINKS

Sepasoft - MES Modules
Cirrus Link - MQTT Modules

RESOURCES

Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support
SDK Documentation
SDK Examples

ALL USER MANUAL VERSIONS

Ignition 8.1
Ignition 7.9
Ignition 7.8

Deprecated Pages

Employees

Sign In

Skip to end of metadata
Go to start of metadata


Themes

Perspective comes with several themes, providing initial styling to all components. A theme effectively provides the default style to a component, allowing styles to override and modify any styling rules that are defined in the theme. 

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.


On this page ...

Initial Theme

Ignition installations come with the following themes:

  • light - white background
  • dark - dark background

The following feature is new in Ignition version 8.0.13
Click here to check out the other new features

Ignition version 8.0.13 introduced the following new themes:

  • light-warm
  • light-cool
  • dark-warm
  • dark-cool

Theme Examples

 Click here to see examples of the themes

Light: 


Light-Cool:

Light-Warm:

Dark:


Dark-Cool:


Dark-Warm:



Setting a Theme 

A theme can be set a number of ways. This section demonstrates a couple of approaches.

Setting a Theme Using a Component

Simply writing to the "theme" session property will change the theme used in the session. In this example, we used a Dropdown component to change the theme in a Perspective Session.  

  1. Open a view in the Designer that contains a few components and drag in a Dropdown component.



  2. With the Dropdown component selected, click on the Binding  icon to create a property binding on the value property  



  3. The Edit Binding window will open. The theme property is a session property. Click on the Property  icon and expand session > props, and select theme. Click OK.
  4. Check Bidirectional and click OK to save your property binding. 




  5. In the Property Editor, enter the theme values under options.

     Click here to see the JSON values used in this example...

    Paste the following onto the "options" property of a dropdown component.

    [
      {
        "value": "light",
        "label": "light"
      },
      {
        "value": "dark",
        "label": "dark"
      }
    ]




  6. Save your project and open your view in a Session or in Preview Mode.

  7. From the Dropdown component, select a desired theme (i.e., light). 



    The selected theme will now be applied for the entire Perspective Session.

Theme Component Action

You can also set a theme by configuring a Component Action

  1. Open a view in the Designer with a couple of components, including a button component. The goal here is to change the active theme to "dark" when a user presses the button.
  2. Select the Button component, and click on the Components > Configure Events at the top of the Designer menubar.




  3. The Event Configuration window will appear. Select the event you want to put the Theme on. In this example, we used onClick.  Click the Add icon and choose Theme. 



  4. Select the desired Theme name (i.e., dark) and click OK.



  5. Click Save and open either a Perspective Session, or click Preview Mode if you are in the Designer.
  6. Click the Button and the theme will change to Dark Mode. 




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;

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


  • No labels