Page History

Included Themes

Light Themes

Dark Themes

High Contrast Themes

Theme Pairs

Themes Description

Themes are presented in complementary Light and Dark pairs, giving users the freedom to match their preferred visual style.

Theme Pair	Description
Light & Dark	Clean white

vs.

and classic dark — optimized for bright or dim environments.

Sky

Platinum &

NavyA fresh, airy light blue paired with a rich, calming navy

Onyx	Subtle gray tones paired with a sharp, modern black style.
Steel & Graphite	Cool grayscale Light and Dark themes with a modern, minimal feel.
Pearl & Indigo	Soft

indigo

lilac-accented light theme

paired

with a bold, rich purple dark variant.

Platinum

Sky &

Quartz

Navy	Airy sky blue matched with a deep, calming navy

Balanced light gray paired with a refined slate-accented dark.

Steel & Graphite

Cool grayscale light and dark with a modern, minimal design

.
Gold & Coffee	Elegant golden

tones matched

hues paired with a warm, earthy brown.
ContrastLight & ContrastDark	Accessibility-first options designed with

strong visual separation

maximum visual separation and clarity.

Theme Name	Description
Light	A clean, neutral light theme ideal for bright environments.
Platinum	A refined light-gray theme with balanced contrast and minimalism.
Steel	A modern, slightly darker light theme with a cool tone.
Pearl	A soft light theme paired with indigo highlights for subtle contrast.
Sky	A light theme with cool blue undertones, refreshing and calm.
Gold	A warm, inviting light theme with golden accents.
ContrastLight	A high-contrast light theme optimized for accessibility.
Dark	A classic dark theme with soft accents for reduced eye strain.
Onyx	A smooth, elegant dark theme with refined styling.
Graphite	A muted, grayscale dark theme with an industrial edge.
Navy	A rich dark theme with deep blue tones and crisp contrast.
Coffee	A cozy dark theme with warm brown hues for a grounded feel.
ContrastDark	A high-contrast dark theme for enhanced readability.

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.

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

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: