You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 27 Next »

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:


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.

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.

@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.


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:

The root page @parent could not be found in space v10.

  • No labels