Page History

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 → Client Settings → Initial Execution Conditions, and select the Theme in the combobox.

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

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 CustomColors from Legacy Projects

About Themes on Previous Releases

In previous releases, the ColorID (and its names) could be completely customized for each project. Although this created flexibility, it also caused issues when trying to create reusable components across multiple projects.

Another difference: it was very common in previous releases for the Theme features to be used simply as a dictionary of colors, in order to keep the color selection consistent without actually changing the Theme. The application had only one theme, and the selection was just a dictionary of names.

In version 10, colors are still completely customizable. However, a set of standard colors, used by Windows Controls, popup backgrounds, dashboards, and other standard UI elements, now have a fixed ID to ensure consistency across multiple solutions and when applying Dark/Light theme changes.

When migrating from previous versions, you can retain specific color customizations by preparing a CSV file named <ProjectName>-CustomColors.csv, mapping the IDs to new standards. This file is automatically applied during the import of a legacy project (<ProjectName>.tproj).

Preparing  a <Project>.CustomColors.csv File

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 column, ID, is the color you want to map (from the Run / Dictionaries / Themes in previous releases).

The third column, ColorName, is the name of the color in the current release that the resource will be mapped to.

Here is an example of configuration file. The Items in Bold, the decision was to keep the new name.

ID,ItemName,ColorName  
1030,PanelBack,LightBrush  
1041,AlertIndicator,StateAlarm  
1042,AlarmOK,StateOK  
1043,DataColor,ItemTitle  
1044,LabelColorLight,ThemeWhiteBrush 
1046,BadData,StateAlert  
1047,RunTrue,StateGreen
1048,RunFalse,StateRed
1049,LabelColorDark,ThemeBlackBrush
1050,ItemGlow,SelectBrush  
1052,Water,Water  
1053,ItemControl,ItemControl  
1054,CurrentDayBG,ItemCurrent  
1055,PreviousDayBG,ItemPrevious

Note that for IDs 1052 and 1053, the ItemName was set to be the same as the ColorName, meaning the system will translate the IDs, but the name of the color will be kept to the new standard.

When trying to apply new names, only the names in the CustomColors group will accept the new names, the predefined colors for General Theme Colors and HMI will have their IDs translated but keep their standard names.

After import, you can further refine or rename the colors directly in the Displays / Themes configuration table within the Designer.

Sorting and Filtering the Themes Page

You can customize your visualization on the Themes page by applying sorting and filtering options according to your preferences.

You can filter byAll Themes or Custom Themes, and sort by ID, Name, or Date Modified by clicking to the correspondent button. Additionally, you can right click on the Column Headings to find even more customability options.

Image Added

In this section: