Ignition installations come with the following themes:
- light - white background
- dark - dark background
Ignition version 8.0.13 introduced the following new themes:
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.
- Open a view in the Designer that contains a few components and drag in a Dropdown component.
- With the Dropdown component selected, click on the Binding
- 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.
- Check Bidirectional and click OK to save your property binding.
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.
Save your project and open your view in a Session or in Preview Mode.
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.
- 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.
- Select the Button component, and click on the Components > Configure Events at the top of the Designer menubar.
- 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
- Select the desired Theme name (i.e., dark) and click OK.
- Click Save and open either a Perspective Session, or click Preview Mode if you are in the Designer.
- Click the Button and the theme will change to Dark Mode.
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:
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:
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.
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.