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

Introduction to Themes

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

• Image Removed

When you go to Displays → Theme Colors, 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. 

Image Removed

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. 

Image Removed

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

Image Removed

How to Set a Theme

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

.

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. 

Image Removed

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

Configure 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

List of 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

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.

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.

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.

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

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: