Benutzen von Themes

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. (Mehr zu Custom-Themes im Best Practice Guide)

• 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

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