Themes are sets of visual styles that determine 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 that control color schemes and layout aesthetics.
The Designer tools has a set of five light and five dark themes. Those same themes, plus 2 high-contrast and 2 custom themes, are available to be used in the runtime, for operator displays.
Applying Theme Colors
On the Solution Designer (engineering workspace) go to Home, and select the Theme at the Welcome Page, or in the User Preferences dialog.
The Properties Sidebar has color editors to select colors for Border, Fill, and Text elements when drawing displays.
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.
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. |
Working with Themes
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, in Displays Expressions, or Display Code Behind. When the properties isn't set, or set to empty string the client station falls back to the theme defined on ClientSettings Startup Theme.
| Code Block |
|---|
@Client.Theme = "Dark"; |
This allows displays to instantly adopt a new look based on user preferences or application context—without requiring a restart.
Working with ThemesSelecting 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.
| Note |
|---|
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.
| Code Block |
|---|
@Client.Theme = "Blue";
@Client.Theme = "Dark";
@Client.Theme = "Yellow";
@Client.Theme = ""; |
Select Colors in the Designer
When drawing displays, the Properties Sidebar, has the colors editors, to select colors for Border, Fill, and Text Elements.
When editing colors, the BrushEditorDialog is open:
The Theme, HMI (Hight Performance HMI)and Custom present the colors that are automatically updated when a global theme is applied to the solution.
- The Theme tabThe THEME tab lists general-purpose colors, automatically filtered based on the selected property—such as background, border, or text.
- The HMI tab contains colors that follow High Performance HMI Graphics guidelines.
- The Custom tab are pre-defined colors for general purpose that can have the name and color customized to each solution.
Preview Runtime Appearance
In the display editor, the Properties Sidebar includes an Appearance section with a Theme dropdown to preview how the display appears under different themes.
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.
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
Core 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
Diagram Elements
Color Name | Description |
|---|---|
LightBrush | Inner brush for group-like controls |
ShadeBrush | Outer/contrast edge for grouped zones |
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 |
Color Name | Description |
|---|---|
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
Alarm 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 |
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
Each theme includes a consistent set of color brushes designed for use in dynamic symbols, dashboards, and runtime visuals. These colors provide both visual consistency and functional clarity across light and dark environments.
ColorName | Description |
|---|---|
ItemTitle | Title or label text within item blocks |
ItemFill | Fill color inside a container, data block, or panel |
ItemControl | Section used for controls or interactive elements |
ItemLine | Divider or outline stroke for segments or rows |
ItemCurrent | Highlight for currently selected or active row/item |
ItemPrevious | Color for recently changed, previous, or background-highlight row |
StateGreen | Green status – running or healthy |
StateRed | Red status – fault, error, or stop |
StateActive | Indicates active, enabled, or live elements |
StateInactive | Indicates inactive or disabled elements |
Waste | Color used in process visuals to represent waste streams |
Water | Color used in process visuals to represent water or fluids |
Extended Custom Brushes
These colors are provided for extra flexibility when building reusable components or solution-specific visualizations.
Brush Key | Description |
|---|---|
CustomColor | Theme-neutral base color for background fills or overlays |
Custom1Teal | Deep teal green, good for OK/status indicators |
Custom2Slate | Indigo-slate tone, used for cool accents |
Custom3Amber | Bright amber, useful for warnings or highlights |
Custom4Cyan | Cyan blue, ideal for metrics or charts |
Custom5Coral | Coral pink, good for alert states or attention labels |
Custom6Purple | Orchid purple, elegant tone for accents |
Custom7Primary | Taupe brown, neutral for borders or UI blocks |
Custom8Secondary | Bright aqua, great for indicators or strokes |
Custom9Neutral | Lime green, suitable for passive indicators |
Custom10Dimmed | Rose pink, a soft muted tone for secondary visuals |
Customizing Themes
Color Names and Brushes
An easy to customize the themes for you specific applications, is to change the name of Colors, or its Brush keys.
The colors listed under Core Themes Colors, and High Performance HMI Graphics, can't be modified, as it would potentially create issues in standard UI components.
All the colors listed under Custom Colors, both the General Colors and Extended Colors Brushes, can have the name or its color modified.
In order to do that you just navigate in the Designer Solution explorer to Displays > Themes.
At that page you can edit the Name fields or colors directly on the table or copy and past from clipboard.
| Info | ||
|---|---|---|
| ||
You can only customize any Color after CustomColor (ID >= 100), or any color in CustomLight and CustomDark themes. The other names in and colors in the table, which as system colors, are protected. |
Custom Light and Dark Themes
The table includes two columns for a CustomLight and a CustomDark theme, which are originally exactly the same of the Light and DarkThemes.
Use those columns if you to have a complete new theme in your solution.
| Warning | ||
|---|---|---|
| ||
Attention when using the RESET or Paste commands on that user interface and they have an undo operation. The Reset will overwrite all your CustomColors and the Custom Themes back to original software settings. |
Importing Custom Colors from Legacy Projects
When migrating from previous versions, you can retain color customizations by preparing a CSV file named <ProjectName>-CustomColors.csv. This file is automatically applied during the import of a legacy project (<ProjectName>.tproj).
The file must follow this format:
ID | ItemName | ColorName |
|---|
ID and ItemName: These two columns reference the customized color definitions from your legacy system. This data is typically extracted from the Run-Dictionaries-Themes table of earlier versions.
ColorName: This third column specifies which theme resource in the current system the legacy color should map to.
The first 2 columns, ID and ItemName, are populated with the customizations from the legacy project. That information is extracted from the table Run-Dictionaries-Themes from previous releases.
The third color, is to which resource in the current model that color will be mapped.
Here is an example of configuration file:
| Code Block | ||
|---|---|---|
| ||
ID,ItemName,ColorName
1030,PanelBack,LightBrush
1041,AlertIndicator,StateAlarm
1042,AlarmOK,StateOK
1043,DataColor,ItemTitle
1044,LabelColorLight,ThemeWhiteColor
1046,BadData,StateAlert
1047,RunTrue,StateGreen
1048,RunFalse,StateRed
1049,LabelColorDark,ThemeBlackColor
1050,ItemGlow,SelectBrush
1052,Water2,Water
1053,ControlButton,ItemControl
1054,CurrentDayBG,ItemCurrent
1055,PreviousDayBG,ItemPrevious |
| Tip |
|---|
You don’t need to include every color from the legacy project—only the customized ones or those for which the default mapping does not meet your requirements. Standard theme roles are applied automatically during import. |
After import, you can further refine or rename the colors directly in the Displays > Themes configuration table within the Designer
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.
See below the full list of standards:
Item Name
Description
DefaultBrush
Sets the base color for UI elements without specific color settings.
DefaultBorder
Defines the standard color for the borders of UI components.
WatermarkBrush
Assigns a specific color for watermark elements.
ThemeBlackBrush
Sets a standard black brush color.
ThemeWhiteBrush
Sets a standard white brush color.
AccentBrush
Assigns a color to highlight interactive or key elements.
PageBackground
Applies the color for the primary background of pages.
PanelBackground
Sets the background color for panels.
PopupBackground
Applies the color for pop-up windows.
ControlBackground
Defines the background color for standard UI controls.
ComboBoxBackground
Sets the background color specifically for combo boxes.
ButtonBackground
Applies the background color for buttons.
LightBrush
Assigns a color to specific elements within a GroupBox.
ShadeBrush
Applies a color to create contrast within a GroupBox.
BayBrush
Applies a color to specific diagram elements.
LegendBrush
Sets the color for legend text or icons in diagrams.
TextForeground
Applies the color for standard text.
TextAccentForeground
Assigns a color to accented text.
TextSubtleForeground
Sets the color for secondary or less prominent text.
TextHyperlinkForeground
Applies a color to hyperlinks.
HeaderForeground
Applies the color for header text in dashboards.
HeaderBackground
Sets the background color for dashboard headers.
ItemBackground
Applies the color for individual dashboard items.
ItemBorder
Defines the border color for dashboard items.
SelectFocusBrush
Applies the color to indicate the focused item.
SelectBrush
Sets the color for selected items within lists or dropdowns.
FocusBrush
Applies the color to elements in focus.
HoverBackground
Sets the background color for elements when hovered over.
HoverBorder
Applies a color to the borders of elements during hover.
PressedBackground
Sets the background color for elements when pressed.
PressedBorder
Defines the border color for elements when pressed.
DisabledForeground
Applies a color to text and icons in disabled controls.
DisabledBackground
Sets the background color for disabled controls.
DisabledBorder
Applies the border color for disabled controls.
HpgDefaultFill
Sets the fill color for default graphical elements.
HpgDefaultStroke
Applies the stroke color for default graphical elements.
HpgOnFill
Sets the fill color for elements in an "on" state.
HpgOnStroke
Applies the stroke color for "on" state elements.
HpgOffFill
Sets the fill color for elements in an "off" state.
HpgOffStroke
Defines the stroke color for "off" state elements.
HpgElementBlueColor
Applies a specific blue color to highlight specific data or states.
HpgElementLightBlueColor
Sets a lighter blue for differentiation within similar elements.
HpgElementDarkBlueColor
Applies a darker blue for contrast within graphical elements.
HpgElementGreenColor
Sets a green color for positive or successful states.
AlertHighPriorityColor
Applies color to high-priority alerts for urgent notifications.
AlertMediumPriorityColor
Sets the color for medium-priority alerts. Ensures visibility for non-urgent alerts.
AlertLowPriorityColor
Applies color to low-priority alerts.
AlertDiagnosticColor
Sets the color for diagnostic alerts.
AlertNormalColor
Applies color to normal, non-critical alerts.
CustomBrush1
Custom color.
CustomBrush2
Second custom color.
CustomBrush3
Third custom color.
CustomBrush4
Fourth custom color.
Available Dark and Light Themes
The built-in themes in the platform are designed to optimize your workspace for both functionality and aesthetics. Each theme is available in both a light and dark version, catering to various lighting conditions and personal preferences.
Theme Pairs:
Light & Dark:
Light: A clean and bright theme, perfect for use in well-lit environments.
Dark: A sleek and subtle theme, ideal for low-light conditions, reducing eye strain.
Sky & Navy:
Sky: A theme that embodies the lightness and tranquility of a clear sky.
Navy: A deep, calming theme inspired by the serene depths of the ocean.
Gold & Coffee:
Gold: A warm, elegant theme that adds a touch of luxury to your workspace.
Coffee: A rich, earthy theme that brings a cozy, grounded atmosphere.
Pearl & Indigo:
Pearl: A soft and inviting theme, creating a gentle, soothing workspace.
Indigo: A bold and refined theme, offering a deeper, more vibrant look.
Steel & Graphite:
Steel: A modern, cool theme that reflects a contemporary style.
Graphite: A darker, industrial-inspired theme that provides a strong, minimalistic feel.
HighContrastLight & HighContrastDark:
HighContrastLight: Designed for maximum visibility in bright conditions, with sharp contrasts.
HighContrastDark: Offers high contrast for enhanced readability in darker environments.
CustomLight & CustomDark:
CustomLight: A flexible theme that allows you to create a personalized light workspace.
.
In this section:
| Page Tree | ||||
|---|---|---|---|---|
|