Themes Erklärung

Das Styling von Vaadin-Applikationen ist in "Themes" organisiert.

Es gibt zwei vordefinierte Themes: "Lumo" and "Material", wobei "Lumo" das Default-Theme ist. Beide Themes haben noch Varianten (Light/Dark), die ebenfalls genutzt werden können.

Die JS-Module der Vaadin-Komponenten beinhalten auch das Styling, allerdings nur für ein Theme. Es gibt also z.B. die Datei "vaadin-button.js" - das Modul für den "vaadin-button" - in zwei Ausführungen, einmal für "Lumo" und einmal für "Material", und je nach verwendeten Theme werden durch das Frontend-Tooling die entsprechenden Module-Dateien eingebunden.

Es ist zusätzlich möglich, eigene Themes zu definieren. Diese Custom-Themes basieren auf dem "Lumo"-Theme.

Genaueres zu Themes kann auf der Vaadin-Dokumentation nachgelesen werden.