Page History

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.

Understanding Themes

Themes in an application enable the creation of pages and objects with custom visuals, reflecting the chosen theme. In the Draw workspace, the Brush Editor offers the option to apply Theme colors. The application sets the theme during runtime through the property @Client.Theme.

Themes are sets of visual styles that determine the appearance of pages and objects within an application, including colors and design elements.

Purpose

The purpose of Themes is to allow users to standardize and customize the visual appearance of their application's interface, maintaining consistency across various components.

Function

Themes function as a collection of design parameters that define the visual style of the application. They control aspects like color schemes and layout aesthetics.

Operation

Users operate Themes by selecting a preferred style within the application settings. In the Draw workspace, the Brush Editor allows the application of Theme Colors to various elements.

Application

Themes apply to the overall look and feel of the application. They affect everything from background colors to button styles, ensuring a cohesive visual experience.

Usage

To use Themes, users navigate to Go to Displays → Themes. They set the runtime theme via the property @Client.Theme, which determines the active visual style of the application.

Configuring Themes

The Themes function allows you to customize the appearance of your display to better suit your solution. It is available for .NET and HTML5 Clients.

When you go to Displays → Themes, you will find predefined theme palettes that are built into most of the project templates. The Blank Project is the only theme that does not have predefined theme palettes. Themes are completely customizable since you can select any color you want for each element in each column. You can use this method to create your own theme.  

The colors and themes displayed in the image below are built into new projects. The DashBoard, HighPerformance and Standard display elements are grouped together in the ItemName column. 

Enabling/Disabling Theme

To enable or disable the themes function, go to the Display Drawing > Drawing and click the checkbox located at the bottom of the left panel.

When a theme is disabled for an entire page, the theme for every object in the display will also be disabled. The colors will be the predefined colors shown in the image above.

When you change the theme in runtime, the pages and objects will keep their default configured colors. 

Individual components will have an Enable/Disable checkbox in the left panel settings.

Setting a Theme

There are a couple of different ways in which a theme can be applied to an object or project:

• Startup a Theme in a Project.
• Change a Theme in Runtime.

• Configure a Palette for an Element in a Page (Rectangle, Button, Textblock, etc).

• Pre-defined Theme and Colors.

• Specific Element Properties (Advanced Settings).

Selecting a Startup Theme

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

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. See the image below.

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

@Client.Theme = "Blue";
@Client.Theme = "Dark";
@Client.Theme = "Yellow";
@Client.Theme = "";

Configuring a Palette for an Element

Configure a Palette for an Element in a Page (Rectangle, Button, Textblock, etc).

To set a theme for an element in the display, you need to open the Appearance configuration window located in the left panel toolbar, in Displays → Theme Colors. 

At the top of the Appearance configuration window, you will find a field called Theme Color. To select the color you want, you can insert the item name or click the button and browse through the available ones.

For the most part, this theme color configuration window will be available for all elements that can have their colors changed. 

Image Removed

Supported Components

The list below presents display objects that you are able to customize in the Theme tab and some of the most used properties:

Type Name

Type Property

Example

Description

TButton

Background

#FF434343

Background color

Foreground

WhiteSmoke

Text Label color

Font Family

Courier New

Font Families

FontStyle

Italic

Font Styles

TLabelBox

Background

Transparent

Background color

Foreground

Black

Text Label color

TDisplay

Background

LightGray

Background color

TLayout

Background

#968B7D

Background color

Rectangle

Fill

#C8BDAF

Fill color

Stroke

#322719

Border line color

Ellipse

Fill

WhiteSmoke

Fill color

Stroke

#9D7C8D

Border Line color

Polygon

Fill

#C3C3AA

Fill color

Stroke

#51504E

Border line color

Polyline

Stroke

#51504E

Border line color

Path

Fill

#EBEBD2

Fill color

Stroke

Blue

Border line color

TTextBox

Background

#DD97A6

Background color

Foreground

Black

Text color

TComboBox

Background

#DD97A6

Background color

Foreground

Black

Text color

TListBox

Background

#DD97A6

Background color

Foreground

Black

Text color

TCheckBox

Background

#7AE3DB

Background color

Foreground

Black

Text color

BorderBrush

Black

Border line color of CheckBox

OptionMark.Fill

#87353A

Color of check mark

TRadioButton

Background

#7AE3DB

Background color

Foreground

Black

Text color

BorderBrush

Black

Border line color of RadioBox

OptionMark.Fill

#87353A

Color of check mark

TSlider

grip.Fill

Black

Fill color

TrackBackground.Background

Black

Background color

TMenuItem

Background

LightGray

Background color

Foreground

WhiteSmoke

Text color

TTitleBar

Background

LightGray

Background color

Label DragBarTitle.Foreground

Black

Text color

TDrillingChart

CursorBrush

Blue

Vertical cursor color

LabelsBrush

Black

Text Label color

GridLinesBrush

#B6B6B4

Grid Lines color

WindowsBrush

WhiteSmoke

Background color

TTrendChart

LegendColorOption

1

Background  Legend color  (0 –White or

1 – Transparent)

LabelsBrush

#51504E

Text Label color

GridLinesBrush

#51504E

Grid Lines color

CursorBrush

Blue

Vertical cursor color

WindowsBrush

#C3C3AA

Background color

TAlarmWindow

Theme

MetroDark

Custom Theme Style

TDataGridWindow

Theme

MetroDark

Custom Theme Style

TPageSelector

Theme

Zune

Custom Theme Style

The Theme property for TAlarmWindow, TDataGridWindow and TPageSelector objects contains your own themes. See below the supported value for it:

MetroDark         

MetroLight                          

ExpressionLight

ExpressionBlack

ExpressionBlue               

ExpressionLive

Zune

Windows7         

Glass

Windows8         

MediaPlayer     

Classic

Pre-defined Theme and Colors

When a new project is created, it already contains several built-in themes and colors. You can create a new theme with new colors, or you can change the color of the pre-configured theme. 

Some important elements that have pre-defined colors:

• 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…)

You can use all the colors in the image below to create any color palette you desire. 

Image Removed

Creating new Themes

Image Removed

Theme header

New: Creates a new Themes template option.

Del: Deletes an existing Themes template.

Rename: Renames an existing Themes template.

Check: Checks all added elements to see if there is any invalid configuration.

Export Properties: Exports to the clipboard all properties that are available for selected object type. The user can see them by pasting it to Notepad, for example.

In the grid under these buttons, you will find the following columns:

Type Name: The object type that will be customized (see supported elements in the next Section).

Property Name: Object property that will be customized.

Value: Value that will be applied to the element property. It can be Colors, Font Type, Font Size, Stroke Thickness, etc. For colors you can use in Hex format (e.g.: 0000FF) or HTML Color name (e.g.: Blue).

Description: A briefly description about the component.

Uid: Custom name given to a display object in Draw Environment. UID is optional and it should be used when you want to customize specific objects. The UID is how to identify these objects. You can have many objects with the same UID, so the themes will apply the same property value to all of them. See the image below where you can find the UID field.

Image Removed

In the image below, you can find an example of 3 objects (in the left side) with the same Uid and another one (right side) with different Uid.

Image Removed

Exporting Themes

When selecting to export a page or a symbol with the dependencies enabled the Item Name (rows) will be included in the export process. To include new theme columns the specific ThemeColorName must to be selected manually. It will avoid replace the color scheme already defined in the target project.

Advanced Properties

When clicking the advanced button from the Theme tab, the advanced dialog box will open based on which theme you selected with the combobox. 

It is important to notice that these properties will only be valid for the specific theme displayed in the Configuration Window (1).

Image Removed

By opening the advanced settings, you can easily access components such as text font, radio box marker, combo box marker, or components that are not colors or are not exposed in the drawing tool configuration.

In the example above, the customization is valid to TRadioButtons and all Ellipse. You can overwrite the basic color configuration by opening the Advanced Settings and typing the name of the property and value you desire. To filter for specific elements, you should use the Uid property to select a specific element.

To make sure the configuration you inserted is valid, always click the Check button (2). A popup message will appear with a Success/Error message.

The Export Properties button (3) will export all properties that are available, for the selected object, to the clipboard. The user can see the properties by pasting them to a text editor application (e.g.: Notepad). Below you can find some of the exported properties for the Ellipse object.

* Type: System.Windows.Shapes.Ellipse
- Properties:
. Effect, System.Windows.Media.Effects.Effect
. Fill, System.Windows.Media.Brush
. Focusable, System.Boolean
. Height, System.Double
. UseLayoutRounding, System.Boolean
. VerticalAlignment, System.Windows.VerticalAlignment
. Visibility, System.Windows.Visibility
. Width, System.Double

Client Settings → Initial Execution Conditions, and select the Theme in the combobox.

Copying themes

• “Copy Custom Themes”: Copies all colors from custom themes (CustomLight and CustomDark).
• “Copy Custom Colors”: Copies all custom colors from all themes (only ColorGroup = CustomColors).

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.

Image Added

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

Demonstration Project

There is a Theme demo project available so the customer can test this feature. It contains all supported elements and shows how to use this feature in a project.

There are several different themes available in this demo project that you can use as reference to build it in your own project. Copying from Theme tables (Run → Dictionaries → Themes) and pasting it in your own folder also work great. See below some images extracted from the project.

Image RemovedImage RemovedImage RemovedImage Removed

In this section: