Overview
Themes define the visual style used across engineering and runtime displays. They provide a consistent color system for pages, controls, text, and interactive elements. Our platform includes built-in light, dark, high-contrast, and customizable themes that can be applied instantly in both the Designer and runtime environment.
Themes automatically adapt UI components and graphical objects using standardized color roles, improving usability and allowing consistency across multiple operator displays and devices.
On this page:
Included Themes
Light Themes
Dark Themes
High Contrast Themes
Applying Theme Colors
You can apply themes in two primary ways:
• In the Designer:
Select the theme from the Welcome Page or via the User Preferences panel. Use the Properties Sidebar to configure brushes that dynamically adapt to the selected theme.
• In Runtime:
Apply a theme dynamically using the property Client.Theme.
@Client.Theme = "ThemeName"; |
Select Colors in the Designer
When drawing displays, the Properties Sidebar, has the colors editors, to select colors for Border, Fill, and Text Elements.
The THEME and HPG presents the colors that automatically changed, when a global theme is selected for the solution.
The THEME tab has the generic colors (the list is filtered automatically accordingly as you edit a background, border or text color), the HPG section has colors that following the specification for High Performance HMI Graphics.
When drawing the displays, the Properties SideBar has a section Appearance, with the Theme ComboBox.
That option will change the preview of the display, when running on the Designer tool.
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.
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 = ""; |
Theme Color Roles
The platform provides a structured color definition system. These colors are applied automatically by the system when creating UI controls, and can also be used directly in custom graphics, using the previously showed color selection dialogs.
The page Displays → Themes in the Solution Explorer has the full table will allow pre-defined theme colors. Those colors are organized in the following main groups:
- Theme Colors
- High Performance HMI Graphics
- Custom Colors
The General Theme Colors is organized in the following groups:
- General Theme Colors
- Main Backgrounds
- GroupBox Elements
- Diagram Elements
- Text Elements
- Dashboard Elements
- State and Interaction
- Disabled Controls
Below is a list of all standard theme colors, grouped by their functional role
Theme Colors
General Theme Colors
Color Name | Description |
|---|---|
DefaultBrush | Base color for generic content |
DefaultBorder | Border color for default elements |
WatermarkBrush | Watermark or placeholder text color |
ThemeBlackBrush | System black |
ThemeWhiteBrush | System white |
AccentBrush | Primary accent color for key elements |
Main Backgrounds
Color Name | Description |
|---|---|
PageBackground | Global background color for pages |
PanelBackground | Panel or container background |
PopupBackground | Background for popups or dialogs |
ControlBackground | General control (e.g. textbox) bg |
ComboBoxBackground | Combo box background |
ButtonBackground | Standard button background |
GroupBox Elements
Color Name | Description |
|---|---|
LightBrush | Inner brush for group-like controls |
ShadeBrush | Outer/contrast edge for grouped zones |
Diagram Elements
Color Name | Description |
|---|---|
BayBrush | Diagrams or structural sections |
LegendBrush | Text/legend colors for diagrams |
Dashboard Elements
Color Name | Description |
|---|---|
HeaderBrush | Section headers |
TitleBrush | Panel titlebars |
ItemBackground | Item content block |
ItemBorder | Border around blocks |
State and Interaction
Color Name | Description |
|---|---|
SelectFocusBrush | Focused item border |
SelectBrush | Highlighted selection |
FocusBrush | Keyboard or mouse focus indicator |
HoverBackground | Background when hovered |
HoverBorder | Border when hovered |
PressedBackground | Active press background |
PressedBorder | Border on press |
Disabled Controls
Color Name | Description |
|---|---|
DisabledForeground | Disabled/inactive text color |
DisabledBackground | Background for disabled fields |
DisabledBorder | Border around disabled controls |
High Performance HMI Graphics
Standard Colors
Color Name | Description |
|---|---|
HpgDefaultFill | HPG base fill |
HpgDefaultStroke | HPG base stroke |
HpgOnFill | HPG “ON” fill color |
HpgOnStroke | HPG “ON” stroke color |
HpgOffFill | HPG “OFF” fill color |
HpgOffStroke | HPG “OFF” stroke color |
HpgElementBlueColor | Standard blue for HPG blocks |
HpgElementLightBlueColor | Light blue accent in HPG elements |
HpgElementDarkBlueColor | Deep blue variant for HPG |
HpgElementGreenColor | Green fill used in HPG indicators |
Alarm Colors
Color Name | Description |
|---|---|
AlertHighPriorityColor | High severity alert |
AlertMediumPriorityColor | Medium alert |
AlertLowPriorityColor | Low severity warning |
AlertDiagnosticColor | Diagnostic / info condition |
AlertNormalColor | Default or cleared state |
Custom Colors
General Colors
Color Name | Description |
|---|---|
CustomBrush1-4 | Reserved for solution-specific customization |
ItemTitle | Title text within item blocks |
ItemFill | Fill area inside a data block |
ItemControl | Control/button section in item blocks |
ItemLine | Dividers within items |
ItemCurrent | Highlight for selected row/item |
ItemPrevious | Prior state row/item highlight |
StateGreen | Status indication – green |
StateRed | Status indication – red |
StateActive | Active status |
StateInactive | Inactive status |
Waste | Used in process UIs for waste flow |
Water | Used in process UIs for water |
In this section: