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