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.

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

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.

In this section: