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";

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. 

The THEME and HPG presents Theme, HMI (Hight Performance HMI)and Custom present the colors that are automatically changed, updated when a global theme is selected for applied to 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 HMI tab has colors that following the specification for High Performance HMI Graphics. 
• The Custom tab are pre-defined colors for general purpose that the use can customize the name and color to each solution. 

When drawing the displays, the Properties SideBar has a section expander 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.

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. 

Upgrade from previous versions

Previous product versions had another model for themes, where the user could create their own 'ColorIDs" to each application. The issue of that method, and reason it was modified to this release, it created difficulties when exporting symbols from one solution to another, and it was complex to develop multiple themes. The theme feature on previous releases was used just as a color dictionary to the project, rather than a complete theme system.

In order to enable the upgrade of legacy projects, and its custom colorID's, you can create a configuration file that tells the importer how to map the colors to the new system. 

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  
1045,ButtonForeground,ButtonBackground  
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

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 configuration does not need to have all colors from previous system, the standard one we do automatically, just the ones you customized, or our default mapping is not what you want. 

The third color, is to which resource in the current model that color will be mapped. 

When the Import command to a <ProjectName>.tproj is executed, the system looks for the file <ProjectName>-CustomColors.csv to apply during the import execution. 

If you want to customize the name and descriptions of the colors, after the import, you can do it at the Displays > Themes configuration table. 

In this section: