Themes and styles

The new "Themes and Styles" tab in version 2.2 of the designer facilitates designing consistent styles for various sections of the application, providing greater flexibility and uniformity in the user interface.

With this feature, we can easily design and apply a single common style for multiple sections, greatly simplifying the management of the application's appearance.

The "Themes and Styles" tab

The "Themes and Styles" tab is located in the designer's navigation bar at the top of the page.

Clicking on the icon will open a page where we can customize our own styles for a particular section.

We are creating a new name for our theme.

Name themes

List of sections to which we can apply styles.

After selecting the appropriate widget, it will appear with customized style properties.

Each widget has the same style creation properties as in the app properties within the app.

Setting the style in a table.

We can apply only one theme in the application, which means that when creating a style in themes for a specific widget, for example, for a table, that style will be applied to all table sections throughout the application. In other words, one style definition in themes will apply to all occurrences of the given widget in the application.

At any point, it's possible to change the style of a selected widget; however, it's important to remember that changes in themes and styles will affect all sections of that widget throughout the application.

If there are multiple sections in the application and we want to change the style only in one of them, we can do so by modifying the styles in the app properties.

We can also specify general properties such as:

• Application background color
• Margins
• Spacing between sections

It's worth noting that in themes and styles, we don't input any data; this tab is only used for designing the style.

There's an option for importing and exporting a specific style.

The use of themes in the "Info" tab of the application.

Applying a theme in the application.

After defining the appropriate theme in the "Themes and Styles" section of the designer, simply navigate to the "Info" tab in the application and select the theme name from the list. Once the correct theme is selected, all sections in the application will automatically adjust to the designed style.