Overview
The platform provides a comprehensive theming system to ensure your applications are visually consistent, accessible, and aesthetically pleasing—across both the configuration environment (Designer) and deployed Runtime displays.
Themes are designed to adapt to different lighting conditions, user preferences, and branding needs. Whether you’re working in a bright control room, on a factory-floor tablet, or a dark monitoring station, the platform includes a curated set of themes to match.
All built-in themes apply automatically across the Designer and Runtime environments, with no extra configuration required. Custom Light and Dark themes can also be created using built-in theme tools, offering flexibility for OEMs and branded-label solutions.
On this page:
Included Themes
Light Themes
Dark Themes
High Contrast Themes
Themes Description
Themes are presented in complementary Light and Dark pairs, giving users the freedom to match their preferred visual style.
Theme Pair | Description |
|---|---|
Light & Dark | Clean white and classic dark — optimized for bright or dim environments. |
Platinum & Onyx | Subtle gray tones paired with a sharp, modern black style. |
Steel & Graphite | Cool grayscale Light and Dark themes with a modern, minimal feel. |
Pearl & Indigo | Soft lilac-accented light theme with a bold, rich purple dark variant. |
Sky & Navy | Airy sky blue matched with a deep, calming navy. |
Gold & Coffee | Elegant golden hues paired with a warm, earthy brown. |
ContrastLight & ContrastDark | Accessibility-first options designed with maximum visual separation and clarity. |
Theme Name | Description |
|---|---|
Light | A clean, neutral light theme ideal for bright environments. |
Platinum | A refined light-gray theme with balanced contrast and minimalism. |
Steel | A modern, slightly darker light theme with a cool tone. |
Pearl | A soft light theme paired with indigo highlights for subtle contrast. |
Sky | A light theme with cool blue undertones, refreshing and calm. |
Gold | A warm, inviting light theme with golden accents. |
ContrastLight | A high-contrast light theme optimized for accessibility. |
Dark | A classic dark theme with soft accents for reduced eye strain. |
Onyx | A smooth, elegant dark theme with refined styling. |
Graphite | A muted, grayscale dark theme with an industrial edge. |
Navy | A rich dark theme with deep blue tones and crisp contrast. |
Coffee | A cozy dark theme with warm brown hues for a grounded feel. |
ContrastDark | A high-contrast dark theme for enhanced readability. |
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: