Skip to main content

Themes

A theme represents a set of visual components configuration. It defines sets of predefined properties for the UI Components. In other words, the theme defines how an application looks and feels like.

It represents a UI component and can be drag-and-dropped from the Project’s editor Marketplace.

When a Visual Component is instantiated in a Screen, the properties are automatically set from the current theme. Themes are focused on visual properties (e.g. background color, border width, etc). The value of a text field should not be subject to a theme as it is a non-visual property.

Every project has a theme assigned (by default, the Default Theme). Any UI App created in the project automatically has the project theme assigned, however this choice can be overwritten per application.

Theme Editor

This editor is used to define sets, called classes of properties values for Visual Components.

Theme classes are set of properties for a given Visual Component in the same theme (e.g: three kinds of buttons: a default one with neutral colors, a warning one in red and a validate one in green. Theme class is a property on all Visual Component so the user can choose which theme class to use.

By default, the theme class default is applied.

In the editor, each component (button, checkbox, image, list, map, etc) has a set of properties that can be modified and for each, a new class can be created.

Any changes to a theme are automatically applied in the Visual Component instances properties. Switching the current theme is also applied in real-time during the application design or at runtime.