Page History

Included Themes

Light Themes

Image Added

Dark Themes

Image Added

High Contrast Themes

Image AddedImage Removed

Applying Theme Colors

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.

Code Block
language c#
@Client.Theme = "ThemeName";

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

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. 

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

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

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.

Image Removed

Theme Pairs:

CustomLight & CustomDark:

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

Theme Colors

General Theme Colors

Main Backgrounds

GroupBox Elements

Diagram Elements

Dashboard Elements

State and Interaction

Disabled Controls

High Performance HMI Graphics

Standard Colors

Alarm Colors

Custom Colors

General  Colors

In this section: