Page History

Image Added

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.On the Designer Drawing tool

, at When drawing displays, the Properties Sidebar, there is an option RuntimeTheme ComboBox, which allows the drawing editor to emulate the runtime theme, only in the drawing area.When drawing displays, selecting styles via the Brush Editorhas the colors editors, to select colors for Border, Fill, and Text Elements. 

Image Added

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. 

Image Added

When drawing the displays, the Properties SideBar has a section Appearance, with the Theme ComboBox.

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.

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:

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: