...
Es gibt zwei vordefinierte Themes: Lumo and Material, wobei Lumo das Default-Theme ist. Es ist auch möglich, customCustom-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 customCustom-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”
| Code Block |
|---|
@Route("")
@Theme(value = Lumo.class, variant = Lumo.DARK)
public class MainLayout extends VerticalLayout {
...
} |
Custom Theme “my-theme”
...
und Material, als auch Custom-Themes können mit dem GUI-Builder über das Drop-Down-Menü rechts oben gesetzt werden.
...
| Info |
|---|
Manuelle 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) |
