Themes explanation

The styling of Vaadin applications is organized in "themes".

There are two predefined themes: "Lumo" and "Material", where "Lumo" is the default theme. Both themes have variants (Light/Dark) that can be used as well.

The JS modules of the Vaadin components also include the styling, but only for one theme. So, for example, the file "vaadin-button.js" - the module for the "vaadin-button" - exists in two versions, once for "Lumo" and once for "Material", and depending on the theme used, the corresponding module files are included by the frontend tooling.

It is additionally possible to define your own themes. These custom themes are based on the "Lumo" theme.

More detailed information about themes can be found on the Vaadin documentation can be read.