Welches Theme ein Projekt nutzt wird mit Hilfe der @Theme
Annotation festgelegt.
Diese Annotation muss in der Startseite, also der Klasse mit @Route("")
gesetzt werden - wenn diese kein ParentLayout
hat.
Falls die Startseite ein ParentLayout
hat, muss dort die @Theme
Annotation gesetzt werden.
Es gibt zwei vordefinierte Themes: Lumo and Material, wobei Lumo das Default-Theme ist. Es ist auch möglich, custom-Themes zu definieren.
Wenn kein Theme explizit definiert ist, wird das Lumo-Theme verwendet.
Nur ein einziges Theme kann pro Applikation verwendet werden. Es ist also z.B, nicht möglich gleichzeitig für eine Komponente Theme Lumo zu verwenden und für eine Zweite das Theme Material
Ein Projekt kann mehrere custom-Themes beinhalten - aber nur eines verwenden
Es ist bei laufender Anwendung kein Theme-Wechsel möglich
RapidClipse bietet Unterstützung beim Erstellen von Custom Themes und beim Generieren der @Theme
Annotation.
Beispiele für das Setzen eines Themes:
Lumo in der Variante “Dark”
@Route("") @Theme(value = Lumo.class, variant = Lumo.DARK) public class MainLayout extends VerticalLayout { ... }
Custom Theme “my-theme”
@Route("") @Theme(themeFolder = "my-theme") public class MainLayout extends VerticalLayout { ... }
Die Theme-Änderungen sind erst nach einen Background-Server-Refresh im GUI-Builder sichtbar. Ein Button dafür ist Rechts-Oben im GUI-Builder vorhanden (Siehe Screenshot)