Overview

Themes are a configuration feature designed to set colors in display objects in runtime and the Designer Workspace, and optional on Runtime displays.

Themes are sets of visual styles determining the appearance of pages and objects within an application, including colors and design elements. Their purpose is to standardize and customize the application's visual appearance, ensuring consistency across components. Themes function as collections of design parameters controlling color schemes and layout aesthetics. 

On this page:

Applying Themes

On the Designer (engineering workspace) go to Home, and select the Theme at that Welcome page

On the Designer Drawing tool, at the Properties SIdeBar, there is a RuntimeTheme ComboBox, which allows the drawing editor to emulate the runtime theme, only in drawing area.

When drawing displays, selecting styles via the Brush Editor.

When running the solution, change dynamically the Theme using the property @Client.Theme

Working with Themes

Selecting a Startup Theme

You can select a pre-created Theme to startup your solution.

To do so, go to Displays / List, and click Windows button at Client Settings. It will open a popup window where the Initial Theme field is on the bottom. See the image below.

If the field is left blank, the solution starts up without any theme using the objects properties used at the moment the displays were created.

Changing a Theme in Runtime

Theme selection in runtime can be done by using the syntax below in Script codes, Expression fields, or objects configuration.

To set the solution to the default configuration, without a custom theme, you need to set the Client.Theme to an empty string (Client.Theme= ””) or create an empty theme table and assign it to the theme property.

@Client.Theme = "Blue";
@Client.Theme = "Dark";
@Client.Theme = "Yellow";
@Client.Theme = "";

Pre-defined Theme Colors

Go To Displays → Themes, in order to view the various Themes dents and its color pallet. 

A Theme Pallet incudes standard color for visual elements like

  • DefaultColor

  • DisplayBackground

  • HeaderBackground

  • TextForeGround

  • All HighPerformance State (all of them start with HP, ex: HPOnStroke, HPOffStroke, HPDisableStroke)

  • Dashboard pages (all of them start with Dashboard, ex: DashboardTitleBackground, DashboardItem…)

When you create displays consistent with those standards, when a new Theme is loaded, the visuals of your displays will remain consistent.

Dark and Light Themes

There are 10 pre-defined themes, 5 with Light background and 5 with Dark background

Additionally, there 2 themes for HighContrast, and the option to create 2 more custom themes.

In this section: