Included Themes
Light Themes
Dark Themes
High Contrast Themes
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 and classic dark — optimized for bright or dim environments. |
Platinum & 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 lilac-accented light theme with a bold, rich purple dark variant. |
Sky & Navy | Airy sky blue matched with a deep, calming navy. |
Gold & Coffee | Elegant golden hues paired with a warm, earthy brown. |
ContrastLight & ContrastDark | Accessibility-first options designed with 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. |
Working with Themes
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, in Displays Expressions, or Display Code Behind. When the properties isn't set, or set to empty string the client station falls back to the theme defined on ClientSettings Startup Theme.
@Client.Theme = "Dark";
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.
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
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.
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
Core Theme Colors
General Theme Colors
Color Name | Description |
|---|---|
DefaultBrush | Base color for generic content |
DefaultBorder | Border color for default elements |
WatermarkBrush | Watermark or placeholder text color |
ThemeBlackBrush | System black |
ThemeWhiteBrush | System white |
AccentBrush | Primary accent color for key elements |
Main Backgrounds
Color Name | Description |
|---|---|
PageBackground | Global background color for pages |
PanelBackground | Panel or container background |
PopupBackground | Background for popups or dialogs |
ControlBackground | General control (e.g. textbox) bg |
ComboBoxBackground | Combo box background |
ButtonBackground | Standard button background |
GroupBox Elements
Diagram Elements
Color Name | Description |
|---|---|
LightBrush | Inner brush for group-like controls |
ShadeBrush | Outer/contrast edge for grouped zones |
Color Name | Description |
|---|---|
BayBrush | Diagrams or structural sections |
LegendBrush | Text/legend colors for diagrams |
Dashboard Elements
Color Name | Description |
|---|---|
HeaderBrush | Section headers |
TitleBrush | Panel titlebars |
Color Name | Description |
|---|---|
ItemBackground | Item content block |
ItemBorder | Border around blocks |
State and Interaction
Color Name | Description |
|---|---|
SelectFocusBrush | Focused item border |
SelectBrush | Highlighted selection |
FocusBrush | Keyboard or mouse focus indicator |
HoverBackground | Background when hovered |
HoverBorder | Border when hovered |
PressedBackground | Active press background |
PressedBorder | Border on press |
Disabled Controls
Color Name | Description |
|---|---|
DisabledForeground | Disabled/inactive text color |
DisabledBackground | Background for disabled fields |
DisabledBorder | Border around disabled controls |
High Performance HMI Graphics
Standard Colors
Alarm Colors
Color Name | Description |
|---|---|
HpgDefaultFill | HPG base fill |
HpgDefaultStroke | HPG base stroke |
HpgOnFill | HPG “ON” fill color |
HpgOnStroke | HPG “ON” stroke color |
HpgOffFill | HPG “OFF” fill color |
HpgOffStroke | HPG “OFF” stroke color |
HpgElementBlueColor | Standard blue for HPG blocks |
HpgElementLightBlueColor | Light blue accent in HPG elements |
HpgElementDarkBlueColor | Deep blue variant for HPG |
HpgElementGreenColor | Green fill used in HPG indicators |
Color Name | Description |
|---|---|
AlertHighPriorityColor | High severity alert |
AlertMediumPriorityColor | Medium alert |
AlertLowPriorityColor | Low severity warning |
AlertDiagnosticColor | Diagnostic / info condition |
AlertNormalColor | Default or cleared state |
Custom Colors
General Colors
Each theme includes a consistent set of color brushes designed for use in dynamic symbols, dashboards, and runtime visuals. These colors provide both visual consistency and functional clarity across light and dark environments.
ColorName | Description |
|---|---|
ItemTitle | Title or label text within item blocks |
ItemFill | Fill color inside a container, data block, or panel |
ItemControl | Section used for controls or interactive elements |
ItemLine | Divider or outline stroke for segments or rows |
ItemCurrent | Highlight for currently selected or active row/item |
ItemPrevious | Color for recently changed, previous, or background-highlight row |
StateGreen | Green status – running or healthy |
StateRed | Red status – fault, error, or stop |
StateActive | Indicates active, enabled, or live elements |
StateInactive | Indicates inactive or disabled elements |
Waste | Color used in process visuals to represent waste streams |
Water | Color used in process visuals to represent water or fluids |
Extended Custom Brushes
These colors are provided for extra flexibility when building reusable components or solution-specific visualizations.
Brush Key | Description |
|---|---|
CustomColor | Theme-neutral base color for background fills or overlays |
Custom1Teal | Deep teal green, good for OK/status indicators |
Custom2Slate | Indigo-slate tone, used for cool accents |
Custom3Amber | Bright amber, useful for warnings or highlights |
Custom4Cyan | Cyan blue, ideal for metrics or charts |
Custom5Coral | Coral pink, good for alert states or attention labels |
Custom6Purple | Orchid purple, elegant tone for accents |
Custom7Primary | Taupe brown, neutral for borders or UI blocks |
Custom8Secondary | Bright aqua, great for indicators or strokes |
Custom9Neutral | Lime green, suitable for passive indicators |
Custom10Dimmed | Rose pink, a soft muted tone for secondary visuals |
Customizing Themes
Color Names and Brushes
An easy to customize the themes for you specific applications, is to change the name of Colors, or its Brush keys.
The colors listed under Core Themes Colors, and High Performance HMI Graphics, can't be modified, as it would potentially create issues in standard UI components.
All the colors listed under Custom Colors, both the General Colors and Extended Colors Brushes, can have the name or its color modified.
In order to do that you just navigate in the Designer Solution explorer to Displays > Themes.
At that page you can edit the Name fields or colors directly on the table or copy and past from clipboard.
System Colors
You can only customize any Color after CustomColor (ID >= 100), or any color in CustomLight and CustomDark themes. The other names in and colors in the table, which as system colors, are protected.
Custom Light and Dark Themes
The table includes two columns for a CustomLight and a CustomDark theme, which are originally exactly the same of the Light and DarkThemes.
Use those columns if you to have a complete new theme in your solution.
Reset Colors Command
Attention when using the RESET or Paste commands on that user interface and they have an undo operation.
The Reset will overwrite all your CustomColors and the Custom Themes back to original software settings.
In this section: