Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.


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

New_in
Version8.0.13


Ignition version 8.0.13 introduced the following new themes:

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

Theme Examples

Expand
titleClick 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.

    Expand
    titleClick here to see the JSON values used in this example...

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

    Code Block
    languagejs
    [
      {
        "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. 




Editor_notes

Modifying a Theme - Using a Different Font


Info

Creating a custom Perspective theme is considered an advanced feature.  As such, we operate under the assumption that anyone altering these files has some knowledge of CSS. By making use of CSS variables, imports, and descriptive class selectors, you will find that we provided features and structure to help alleviate some of the frustrations inherent to managing large amounts of CSS.

More information on modifying a theme, or making a new theme, can be found at "%ignitionInstallationDirectory%\data\modules\com.inductiveautomation.perspective\themes.README.md" file (added in 8.0.13).

Note that modifying or creating new themes is unsupported, so our support department will not be able to assist with any questions you may have. However, feel free to ask any questions on the forums


For this example, modify the existing Light theme in "%ignitionInstallationDirectory%\data\modules\com.inductiveautomation.perspective\themes\" to have it use the Ubuntu font. 

  1. Download the Ubuntu family font files here: https://fonts.google.com/specimen/Ubuntu. Put all of the font files from your download in a folder named "Ubuntu" and place this folder in %ignitionInstallationDirectory%\data\modules\com.inductiveautomation.perspective\fonts\.
  2. Go to %ignitionInstallationDirectory%\data\modules\com.inductiveautomation.perspective\themes\ and create a folder named overrides
  3. Inside your overrides folder, create two CSS files, one called fonts and the other called globals.

    Your fonts.css file should look like this:

    Code Block
    languagecss
    titlefonts file example
    @font-face {
        font-family: var(--font-Ubuntu);
        font-style: normal;
        font-weight: 400;
        src: local('Ubuntu'), local('Ubuntu'),
             url('/data/modules/perspective/fonts/Ubuntu/Ubuntu-Regular.ttf') format('ttf');
    }
    
    @font-face {
        font-family: var(--font-Ubuntu);
        font-style: normal;
        font-weight: 500;
        src: local('Ubuntu-Medium'), local('Ubuntu-Medium'),
             url('/data/modules/perspective/fonts/Ubuntu/Ubuntu-Medium.ttf') format('ttf');
    }
    
    @font-face {
        font-family: var(--font-Ubuntu); 
        font-style: normal;
        font-weight: 700;
        src: local('Ubuntu-Bold'), local('Ubuntu-Bold'),
             url('/data/modules/perspective/fonts/Ubuntu/Ubuntu-Bold.ttf') format('ttf');
    }
    


    Your globals.css file should look like this: 

    Code Block
    languagecss
    body, input, textarea, keygen, select, button {
        font-family: var(--font-Ubuntu);
    }
    


    Modify your light.css file in "%ignitionInstallationDirectory%\data\modules\com.inductiveautomation.perspective\themes\" as follows: 

    Code Block
    languagecss
    titlelight.css file example
    @import "./light/variables.css";
    @import "./light/fonts.css";
    @import "./overrides/fonts.css";
    @import "./light/globals.css";
    @import "./overrides/globals.css";
    @import "./light/app/index.css";
    @import "./light/common/index.css";
    @import "./light/designer/index.css";
    @import "./light/palette/index.css";


    Note how you're basically overriding the /light/fonts.css file with your own /overrides/fonts.css file. The same thing is happening with the /light/globals.css file. The order of these imports is important, as an import at the bottom of the list could override imports at the top of the list. 

    By following these steps, your Light theme is ready to use in your Designer using the Ubuntu font. 



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:

Code Block
--variable-name: #FF0000;


Note

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 theme instead of making changes to the built-in themesCSS 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. 

Panel



lightlight-coollight-warmdarkdark-cooldark-warm
--neutral-10

Table cell color
bgcolour#FAFAFA

Table cell color
bgcolour#F2F4F8

Table cell color
bgcolour#F7F3F2

Table cell color
bgcolour#161616

Table cell color
bgcolour#121619

Table cell color
bgcolour#171414

--neutral-20

Table cell color
bgcolour#F4F4F4

Table cell color
bgcolour#DDE1E6

Table cell color
bgcolour#E5E0DF

Table cell color
bgcolour#323232

Table cell color
bgcolour#21272A

Table cell color
bgcolour#272525

--neutral-30

Table cell color
bgcolour#D8D8D8

Table cell color
bgcolour#C1C7CD

Table cell color
bgcolour#CAC5C4

Table cell color
bgcolour#515151

Table cell color
bgcolour#343A3F

Table cell color
bgcolour#3C3838

--neutral-40

Table cell color
bgcolour#BDBDBD

Table cell color
bgcolour#A2A9B0

Table cell color
bgcolour#ADA8A8

Table cell color
bgcolour#5E5E5E

Table cell color
bgcolour#4D5358

Table cell color
bgcolour#565151

--neutral-50

Table cell color
bgcolour#A1A1A1

Table cell color
bgcolour#878D96

Table cell color
bgcolour#8F8B8B

Table cell color
bgcolour#767676

Table cell color
bgcolour#697077

Table cell color
bgcolour#736F6F

--neutral-60

Table cell color
bgcolour#767676

Table cell color
bgcolour#697077

Table cell color
bgcolour#736F6F

Table cell color
bgcolour#A1A1A1

Table cell color
bgcolour#878D96

Table cell color
bgcolour#8F8B8B

--neutral-70

Table cell color
bgcolour#5E5E5E

Table cell color
bgcolour#4D5358

Table cell color
bgcolour#565151

Table cell color
bgcolour#BDBDBD

Table cell color
bgcolour#A2A9B0

Table cell color
bgcolour#ADA8A8

--neutral-80

Table cell color
bgcolour#515151

Table cell color
bgcolour#343A3F

Table cell color
bgcolour#3C3838

Table cell color
bgcolour#D8D8D8

Table cell color
bgcolour#C1C7CD

Table cell color
bgcolour#CAC5C4

--neutral-90

Table cell color
bgcolour#323232

Table cell color
bgcolour#21272A

Table cell color
bgcolour#272525

Table cell color
bgcolour#F4F4F4

Table cell color
bgcolour#DDE1E6

Table cell color
bgcolour#E5E0DF

--neutral-100

Table cell color
bgcolour#161616

Table cell color
bgcolour#121619

Table cell color
bgcolour#171414

Table cell color
bgcolour#FAFAFA

Table cell color
bgcolour#F2F4F8

Table cell color
bgcolour#F7F3F2

--seq-1

Table cell color
bgcolour#AE74E8

Table cell color
bgcolour#AE74E8

Table cell color
bgcolour#AE74E8

Table cell color
bgcolour#9659D6

Table cell color
bgcolour#9659D6

Table cell color
bgcolour#9659D6

--seq-2

Table cell color
bgcolour#9659D6

Table cell color
bgcolour#9659D6

Table cell color
bgcolour#9659D6

Table cell color
bgcolour#AE74E8

Table cell color
bgcolour#AE74E8

Table cell color
bgcolour#AE74E8

--seq-3

Table cell color
bgcolour#7D3CBD

Table cell color
bgcolour#7D3CBD

Table cell color
bgcolour#7D3CBD

Table cell color
bgcolour#C79BF2

Table cell color
bgcolour#C79BF2

Table cell color
bgcolour#C79BF2

--seq-4

Table cell color
bgcolour#642B9E

Table cell color
bgcolour#642B9E

Table cell color
bgcolour#642B9E

Table cell color
bgcolour#DABCF7

Table cell color
bgcolour#DABCF7

Table cell color
bgcolour#DABCF7

--seq-5

Table cell color
bgcolour#4B2175

Table cell color
bgcolour#4B2175

Table cell color
bgcolour#4B2175

Table cell color
bgcolour#EAD9FA

Table cell color
bgcolour#EAD9FA

Table cell color
bgcolour#EAD9FA

--seq-6

Table cell color
bgcolour#371C52

Table cell color
bgcolour#371C52

Table cell color
bgcolour#371C52

Table cell color
bgcolour#F5F0FA

Table cell color
bgcolour#F5F0FA

Table cell color
bgcolour#F5F0FA

--div-1

Table cell color
bgcolour#642B9E

Table cell color
bgcolour#642B9E

Table cell color
bgcolour#642B9E

Table cell color
bgcolour#642B9E

Table cell color
bgcolour#642B9E

Table cell color
bgcolour#642B9E

--div-2

Table cell color
bgcolour#7D3CBD

Table cell color
bgcolour#7D3CBD

Table cell color
bgcolour#7D3CBD

Table cell color
bgcolour#7D3CBD

Table cell color
bgcolour#7D3CBD

Table cell color
bgcolour#7D3CBD

--div-3

Table cell color
bgcolour#9656D6

Table cell color
bgcolour#9656D6

Table cell color
bgcolour#9656D6

Table cell color
bgcolour#9656D6

Table cell color
bgcolour#9656D6

Table cell color
bgcolour#9656D6

--div-4

Table cell color
bgcolour#AE74E8

Table cell color
bgcolour#AE74E8

Table cell color
bgcolour#AE74E8

Table cell color
bgcolour#AE74E8

Table cell color
bgcolour#AE74E8

Table cell color
bgcolour#AE74E8

--div-5

Table cell color
bgcolour#C79BF2

Table cell color
bgcolour#C79BF2

Table cell color
bgcolour#C79BF2

Table cell color
bgcolour#C79BF2

Table cell color
bgcolour#C79BF2

Table cell color
bgcolour#C79BF2

--div-6

Table cell color
bgcolour#DABCF7

Table cell color
bgcolour#DABCF7

Table cell color
bgcolour#DABCF7

Table cell color
bgcolour#DABCF7

Table cell color
bgcolour#DABCF7

Table cell color
bgcolour#DABCF7

--div-7

Table cell color
bgcolour#EAD9FA

Table cell color
bgcolour#EAD9FA

Table cell color
bgcolour#EAD9FA

Table cell color
bgcolour#EAD9FA

Table cell color
bgcolour#EAD9FA

Table cell color
bgcolour#EAD9FA

--div-8

Table cell color
bgcolour#F5F0FA

Table cell color
bgcolour#F5F0FA

Table cell color
bgcolour#F5F0FA

Table cell color
bgcolour#F5F0FA

Table cell color
bgcolour#F5F0FA

Table cell color
bgcolour#F5F0FA

--div-9

Table cell color
bgcolour#D7FAF8

Table cell color
bgcolour#D7FAF8

Table cell color
bgcolour#D7FAF8

Table cell color
bgcolour#D7FAF8

Table cell color
bgcolour#D7FAF8

Table cell color
bgcolour#D7FAF8

--div-10

Table cell color
bgcolour#83F2EB

Table cell color
bgcolour#83F2EB

Table cell color
bgcolour#83F2EB

Table cell color
bgcolour#83F2EB

Table cell color
bgcolour#83F2EB

Table cell color
bgcolour#83F2EB

--div-11

Table cell color
bgcolour#43DED3

Table cell color
bgcolour#43DED3

Table cell color
bgcolour#43DED3

Table cell color
bgcolour#43DED3

Table cell color
bgcolour#43DED3

Table cell color
bgcolour#43DED3

--div-12

Table cell color
bgcolour#21C2B7

Table cell color
bgcolour#21C2B7

Table cell color
bgcolour#21C2B7

Table cell color
bgcolour#21C2B7

Table cell color
bgcolour#21C2B7

Table cell color
bgcolour#21C2B7

--div-13

Table cell color
bgcolour#0EA197

Table cell color
bgcolour#0EA197

Table cell color
bgcolour#0EA197

Table cell color
bgcolour#0EA197

Table cell color
bgcolour#0EA197

Table cell color
bgcolour#0EA197

--div-14

Table cell color
bgcolour#08827A

Table cell color
bgcolour#08827A

Table cell color
bgcolour#08827A

Table cell color
bgcolour#08827A

Table cell color
bgcolour#08827A

Table cell color
bgcolour#08827A

--div-15

Table cell color
bgcolour#086962

Table cell color
bgcolour#086962

Table cell color
bgcolour#086962

Table cell color
bgcolour#086962

Table cell color
bgcolour#086962

Table cell color
bgcolour#086962

--div-16

Table cell color
bgcolour#09524D

Table cell color
bgcolour#09524D

Table cell color
bgcolour#09524D

Table cell color
bgcolour#09524D

Table cell color
bgcolour#09524D

Table cell color
bgcolour#09524D

--qual-1

Table cell color
bgcolour#7D3CBD

Table cell color
bgcolour#7D3CBD

Table cell color
bgcolour#7D3CBD

Table cell color
bgcolour#9656D6

Table cell color
bgcolour#9656D6

Table cell color
bgcolour#9656D6

--qual-2

Table cell color
bgcolour#229AD6

Table cell color
bgcolour#229AD6

Table cell color
bgcolour#229AD6

Table cell color
bgcolour#53BAED

Table cell color
bgcolour#53BAED

Table cell color
bgcolour#53BAED

--qual-3

Table cell color
bgcolour#086962

Table cell color
bgcolour#086962

Table cell color
bgcolour#086962

Table cell color
bgcolour#08827A

Table cell color
bgcolour#08827A

Table cell color
bgcolour#08827A

--qual-4

Table cell color
bgcolour#B01355

Table cell color
bgcolour#B01355

Table cell color
bgcolour#B01355

Table cell color
bgcolour#F78BB8

Table cell color
bgcolour#F78BB8

Table cell color
bgcolour#F78BB8

--qual-5

Table cell color
bgcolour#F55353

Table cell color
bgcolour#F55353

Table cell color
bgcolour#F55353

Table cell color
bgcolour#F55353

Table cell color
bgcolour#F55353

Table cell color
bgcolour#F55353

--qual-6

Table cell color
bgcolour#661414

Table cell color
bgcolour#661414

Table cell color
bgcolour#661414

Table cell color
bgcolour#FAF0F0

Table cell color
bgcolour#FAF0F0

Table cell color
bgcolour#FAF0F0

--qual-7

Table cell color
bgcolour#038537

Table cell color
bgcolour#038537

Table cell color
bgcolour#038537

Table cell color
bgcolour#46E385

Table cell color
bgcolour#46E385

Table cell color
bgcolour#46E385

--qual-8

Table cell color
bgcolour#114599

Table cell color
bgcolour#114599

Table cell color
bgcolour#114599

Table cell color
bgcolour#5691F0

Table cell color
bgcolour#5691F0

Table cell color
bgcolour#5691F0

--qual-9

Table cell color
bgcolour#ED5393

Table cell color
bgcolour#ED5393

Table cell color
bgcolour#ED5393

Table cell color
bgcolour#ED5393

Table cell color
bgcolour#ED5393

Table cell color
bgcolour#ED5393

--qual-10

Table cell color
bgcolour#CF7911

Table cell color
bgcolour#CF7911

Table cell color
bgcolour#CF7911

Table cell color
bgcolour#E89C3F

Table cell color
bgcolour#E89C3F

Table cell color
bgcolour#E89C3F

--callToAction

Table cell color
bgcolour#0C7BB3

Table cell color
bgcolour#0C7BB3

Table cell color
bgcolour#0C7BB3

Table cell color
bgcolour#229AD6

Table cell color
bgcolour#229AD6

Table cell color
bgcolour#229AD6

--callToActionHighlight

Table cell color
bgcolour#E8F4FA

Table cell color
bgcolour#E8F4FA

Table cell color
bgcolour#E8F4FA

Table cell color
bgcolour#0C2938

Table cell color
bgcolour#0C2938

Table cell color
bgcolour#0C2938

--callToAction--hover

Table cell color
bgcolour#229AD6

Table cell color
bgcolour#229AD6

Table cell color
bgcolour#229AD6

Table cell color
bgcolour#0C7BB3

Table cell color
bgcolour#0C7BB3

Table cell color
bgcolour#0C7BB3

--callToAction--active

Table cell color
bgcolour#066391

Table cell color
bgcolour#066391

Table cell color
bgcolour#066391

Table cell color
bgcolour#53BAED

Table cell color
bgcolour#53BAED

Table cell color
bgcolour#53BAED

--callToAction--disabled

Table cell color
bgcolour#A1A1A1

Table cell color
bgcolour#A1A1A1

Table cell color
bgcolour#A1A1A1

Table cell color
bgcolour#A1A1A1

Table cell color
bgcolour#A1A1A1

Table cell color
bgcolour#A1A1A1

--error

Table cell color
bgcolour#DE1B1B

Table cell color
bgcolour#DE1B1B

Table cell color
bgcolour#DE1B1B

Table cell color
bgcolour#F55353

Table cell color
bgcolour#F55353

Table cell color
bgcolour#F55353

--info

Table cell color
bgcolour#3272D9

Table cell color
bgcolour#3272D9

Table cell color
bgcolour#3272D9

Table cell color
bgcolour#5691F0

Table cell color
bgcolour#5691F0

Table cell color
bgcolour#5691F0

--infoSecondary

Table cell color
bgcolour#ACCBFC

Table cell color
bgcolour#ACCBFC

Table cell color
bgcolour#ACCBFC

Table cell color
bgcolour#114599

Table cell color
bgcolour#114599

Table cell color
bgcolour#114599

--warning

Table cell color
bgcolour#AD5F00

Table cell color
bgcolour#AD5F00

Table cell color
bgcolour#AD5F00

Table cell color
bgcolour#CF7911

Table cell color
bgcolour#CF7911

Table cell color
bgcolour#CF7911

--warningSecondary

Table cell color
bgcolour#F5BC76

Table cell color
bgcolour#F5BC76

Table cell color
bgcolour#F5BC76

Table cell color
bgcolour#693D07

Table cell color
bgcolour#693D07

Table cell color
bgcolour#693D07

--success

Table cell color
bgcolour#038537

Table cell color
bgcolour#038537

Table cell color
bgcolour#038537

Table cell color
bgcolour#0AA648

Table cell color
bgcolour#0AA648

Table cell color
bgcolour#0AA648

--indicator

Table cell color
bgcolour#1EC963

Table cell color
bgcolour#1EC963

Table cell color
bgcolour#1EC963

Table cell color
bgcolour#1EC963

Table cell color
bgcolour#1EC963

Table cell color
bgcolour#1EC963

--indicatorOff

Table cell color
bgcolour#0A2E18

Table cell color
bgcolour#0A2E18

Table cell color
bgcolour#0A2E18

Table cell color
bgcolour#0A2E18

Table cell color
bgcolour#0A2E18

Table cell color
bgcolour#0A2E18




...