Page History

Image Removed

Included Themes

Light Themes

Image Added

Dark Themes

Image Added

High Contrast Themes

Image Added

Themes Description

Themes are presented in complementary Light and Dark pairs, giving users the freedom to match their preferred visual style.

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. 

@Client.Theme = "Dark";

This allows displays to instantly adopt a new look based on user preferences or application context—without requiring a restart.

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. 

Select Colors in the Designer

When drawing displays, the Properties Sidebar, has the colors editors,

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.

Image Removed

Elements. 

When editing colors, the BrushEditorDialog is open:

The Theme, HMI (Hight Performance HMI)and Custom The THEME and HPG present the colors that are automatically changed, updated when a global theme is selected for 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

Image Removed

When drawing the displays, the Properties Sidebar has includes an Appearance section , with the Theme ComboBoxa Theme dropdown to preview how the display appears under different themes.

Image RemovedImage Added

That option will change the preview of the display, when running on the Designer tool.

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

Theme

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

To do so, go to Displays / Client Settings. Under Initial Execution Settings, select a Theme from the combobox.

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= ””).

@Client.Theme = "Blue";
@Client.Theme = "Dark";
@Client.Theme = "Yellow";
@Client.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

Dashboard Elements

High Performance HMI Graphics

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.

Extended Custom Brushes

These colors are provided for extra flexibility when building reusable components or solution-specific visualizations.

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. 

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. 

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

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

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 includes standard colors for visual elements like:

• DefaultColor

• DisplayBackground

• TextForeground

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

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

When you create displays consistent with those standards, when a new Theme is loaded, the visuals of your displays 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.

HeaderBrush

Applies the color for header text in dashboards.

TitleBrush

Applies the default color for Title bar background

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.

Image Removed

Theme Pairs:

CustomLight & CustomDark:

.

In this section: