Overview
Themes are sets of visual styles that determine the appearance of pages and objects within an application, including colors and design elements. Their purpose is to standardize and customize the application's visual appearance, ensuring consistency across components. Themes function as collections of design parameters that control color schemes and layout aesthetics.
The Designer tools has a set of five light and five dark themes. Those same themes, plus 2 high-contrast and 2 custom themes, are available to be used in the runtime, for operator displays.
On this page:
| Table of Contents | ||||
|---|---|---|---|---|
|
Applying Theme Colors
On the Solution Designer (engineering workspace) go to Home, and select the Theme at the Welcome Page, or in the User Preferences dialog.
When drawing displays, the Properties Sidebar, has the colors editors, to select colors for Border, Fill, and Text Elements.
The THEME and HPG presents the colors that automatically changed, when a global theme is selected for 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 HPG section has colors that following the specification for High Performance HMI Graphics.
When drawing the displays, the Properties Sidebar has a section 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.
Working with Themes
| Easy Heading Macro | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
Introduction
With our new theme selector, users can easily pick a theme that best suit their environment or visual preferences.
- Easily build your own theme or use one of our prebuilt themes.
Is there any item or even an entire screen you do not want to have default theme? A simple checkbox allows you to change it.
Overview
| Info | ||
|---|---|---|
| ||
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.
When you go to Run → Dictionaries → 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 Draw Editor 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.
How to Set a Theme
There are a couple of different ways in which a theme can be applied to an object or project:
Configure a Palette for an Element in a Page (Rectangle, Button, Textblock, etc).
Pre-defined Theme and Colors.
Selecting a Startup Theme
You can select a pre-created Theme to startup your projectsolution.
To do so, go to Edit → Displays → List, and click .NET Clients Windows button at Client Settings. It will open a popup window where the Initial Theme field is on the bottom. See the image below.
| Note |
|---|
If the field is left blank, the project solution starts up without any theme using the objects properties used at the moment the displays were created. |
Changing 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 solution 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.
| Code Block |
|---|
@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 Run → Dictionaries → Themes.
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.
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
| Note |
|---|
If you add the Rectangle and Ellipse types to the Themes list, you need to remember that some Default Displays (Header, LogOn and About) contains this element. So you might need to disable the Theme for those displays or the specifics objects. |
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.
Creating new Themes
On Run → Dictionaries → Themes,you will find all the required information to add different theme options to your components. On the top of the display, you will find some buttons:Pre-defined Theme Colors
Go To Displays → Themes in order to view the various Themes dents and its color pallet.
A Theme pallet incudes standard color for visual elements like:
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…)
When you create displays consistent with those standards, when a new Theme is loaded, the visuals of your displays will remain consistent.
See below the full list of standards:
Item Name | Description |
DefaultBrush | Sets the base color for UI elements without specific color settings. |
DefaultBorder | Defines the standard color for the borders of UI components. |
WatermarkBrush | Assigns a specific color for watermark elements. |
ThemeBlackBrush | Sets a standard black brush color. |
ThemeWhiteBrush | Sets a standard white brush color. |
AccentBrush | Assigns a color to highlight interactive or key elements. |
PageBackground | Applies the color for the primary background of pages. |
PanelBackground | Sets the background color for panels. |
PopupBackground | Applies the color for pop-up windows. |
ControlBackground | Defines the background color for standard UI controls. |
ComboBoxBackground | Sets the background color specifically for combo boxes. |
ButtonBackground | Applies the background color for buttons. |
LightBrush | Assigns a color to specific elements within a GroupBox. |
ShadeBrush | Applies a color to create contrast within a GroupBox. |
BayBrush | Applies a color to specific diagram elements. |
LegendBrush | Sets the color for legend text or icons in diagrams. |
TextForeground | Applies the color for standard text. |
TextAccentForeground | Assigns a color to accented text. |
TextSubtleForeground | Sets the color for secondary or less prominent text. |
TextHyperlinkForeground | Applies a color to hyperlinks. |
HeaderForeground | Applies the color for header text in dashboards. |
HeaderBackground | Sets the background color for dashboard headers. |
ItemBackground | Applies the color for individual dashboard items. |
ItemBorder | Defines the border color for dashboard items. |
SelectFocusBrush | Applies the color to indicate the focused item. |
SelectBrush | Sets the color for selected items within lists or dropdowns. |
FocusBrush | Applies the color to elements in focus. |
HoverBackground | Sets the background color for elements when hovered over. |
HoverBorder | Applies a color to the borders of elements during hover. |
PressedBackground | Sets the background color for elements when pressed. |
PressedBorder | Defines the border color for elements when pressed. |
DisabledForeground | Applies a color to text and icons in disabled controls. |
DisabledBackground | Sets the background color for disabled controls. |
DisabledBorder | Applies the border color for disabled controls. |
HpgDefaultFill | Sets the fill color for default graphical elements. |
HpgDefaultStroke | Applies the stroke color for default graphical elements. |
HpgOnFill | Sets the fill color for elements in an "on" state. |
HpgOnStroke | Applies the stroke color for "on" state elements. |
HpgOffFill | Sets the fill color for elements in an "off" state. |
HpgOffStroke | Defines the stroke color for "off" state elements. |
HpgElementBlueColor | Applies a specific blue color to highlight specific data or states. |
HpgElementLightBlueColor | Sets a lighter blue for differentiation within similar elements. |
HpgElementDarkBlueColor | Applies a darker blue for contrast within graphical elements. |
HpgElementGreenColor | Sets a green color for positive or successful states. |
AlertHighPriorityColor | Applies color to high-priority alerts for urgent notifications. |
AlertMediumPriorityColor | Sets the color for medium-priority alerts. Ensures visibility for non-urgent alerts. |
AlertLowPriorityColor | Applies color to low-priority alerts. |
AlertDiagnosticColor | Sets the color for diagnostic alerts. |
AlertNormalColor | Applies color to normal, non-critical alerts. |
CustomBrush1 | Custom color. |
CustomBrush2 | Second custom color. |
CustomBrush3 | Third custom color. |
CustomBrush4 | Fourth custom color. |
Available Dark and Light Themes
The built-in themes in the platform are designed to optimize your workspace for both functionality and aesthetics. Each theme is available in both a light and dark version, catering to various lighting conditions and personal preferences.
Theme Pairs:
Light & Dark:
Light: A clean and bright theme, perfect for use in well-lit environments.
Dark: A sleek and subtle theme, ideal for low-light conditions, reducing eye strain.
Sky & Navy:
Sky: A theme that embodies the lightness and tranquility of a clear sky.
Navy: A deep, calming theme inspired by the serene depths of the ocean.
Gold & Coffee:
Gold: A warm, elegant theme that adds a touch of luxury to your workspace.
Coffee: A rich, earthy theme that brings a cozy, grounded atmosphere.
Pearl & Indigo:
Pearl: A soft and inviting theme, creating a gentle, soothing workspace.
Indigo: A bold and refined theme, offering a deeper, more vibrant look.
Steel & Graphite:
Steel: A modern, cool theme that reflects a contemporary style.
Graphite: A darker, industrial-inspired theme that provides a strong, minimalistic feel.
HighContrastLight & HighContrastDark:
HighContrastLight: Designed for maximum visibility in bright conditions, with sharp contrasts.
HighContrastDark: Offers high contrast for enhanced readability in darker environments.
CustomLight & CustomDark:
CustomLight: A flexible theme that allows you to create a personalized light workspace.
CustomDark: Customize your dark theme to suit your specific needs and style.
In this section:
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.
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.
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
On Run → Dictionaries → Themesand under the Advanced settings, you can customize the component 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).
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.
| Code Block |
|---|
* 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. Copy from Theme tables (Run → Dictionaries → Themes) and paste in your own paste <<<<.does it mean "folder"?>>>> also work great. See below some images extracted from the project.
| Page Tree | ||||
|---|---|---|---|---|
|