Overview
Themes are a configuration feature designed to set colors in display objects in runtime and the Designer Workspace, and optional on Runtime displays.
Themes are sets of visual styles determining 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 controlling color schemes and layout aesthetics.
On this page:
| Table of Contents | ||||
|---|---|---|---|---|
|
Applying Themes
On the Designer (engineering workspace) go to Home, and select the Theme at that Welcome page
On the Designer Drawing tool, at the Properties SIdeBar, there is a RuntimeTheme ComboBox, which allows the drawing editor to emulate the runtime theme, only in drawing area.
When drawing displays, selecting styles via the Brush Editor.
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. See the image below.
| Note |
|---|
If the field is left blank, the 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 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 = ""; |
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 builtin 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:
| Page Tree | ||||
|---|---|---|---|---|
|