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.

Initial Theme

Ignition installations come with the following themes:

  • light - white background
  • dark - dark background
  • light-warm
  • light-cool
  • dark-warm
  • dark-cool

On this page ...




Setting a Theme 

A theme can be set by directly writing to session.props.theme property. 

In addition, the Theme Component Action can change the current theme in a session. 

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


  • No labels