Using themes
Which theme a project uses is determined using the @theme annotation.
This annotation must be set in the start page, i.e. the class with @Route("") - if it does not have ParentLayout.
If the home page has a ParentLayout, the @Theme annotation must be set there.
There are two predefined themes: Lumo and Material, where Lumo is the default theme. It is also possible to define custom themes. (More about custom themes in the Best Practice Guide)
-
If no theme is explicitly defined, the Lumo theme is used.
-
Only one single theme can be used per application. So, for example, it is not possible to use Lumo theme for one component and Material theme for another component at the same time.
-
A project can contain multiple custom themes - but use only one
-
It is not possible to change the theme while the application is running
Examples of setting a theme:
Lumo and Material, as well as custom themes can be set with the GUI builder via the drop-down menu in the upper right corner.
Manual theme changes are only visible after a background server refresh in the GUI builder. A button for this is available in the upper right corner of the GUI builder (see screenshot).
