Displays Themes

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.

The Properties Sidebar has color editors to select colors for Border, Fill, and Text elements when drawing displays.

The THEME and HPG present 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 as you edit a background, border or text color), the HPG section has colors that follow the specification for High Performance HMI Graphics. 

When drawing the displays, the Properties Sidebar has an Appearance section, with the Theme ComboBox.

That option will change the preview of the display, when running on the Designer tool.

When running the solution, change the Theme dynamically using the @Client.Theme property.

Working with Themes

Selecting a Startup Theme

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

To do so, go to Displays / Client Settings. Under Initial Execution Settings, select a Theme from the combobox.

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= ””).

@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 includes standard colors for visual elements like:

• DefaultColor

• DisplayBackground

• TextForeground

• All High Performance States (all of them start with Hpg, ex: HpgOnStroke, HpgOffStroke, HpgDisableStroke)

• Dashboard pages (all of them start with Dashboard, ex:ItemBackground…)

When you create displays consistent with those standards, when a new Theme is loaded, the visuals of your displays remain consistent.

See below the full list of standards:

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: