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 @ThemeAnnotation.
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 {
...
}