Docs

Documentation versions (currently viewingVaadin 14)

You are viewing documentation for an older Vaadin version. View latest documentation

Theming Embedded Applications

Theming of embedded applications works in exactly the same way as for any other Vaadin component.

By default, embedded Vaadin applications use the Lumo theme (if it is found in the classpath), or no theme at all.

See Styling and Themes for more information.

Assigning a Theme

You can specify a theme, for example the Material theme, for your embedded Vaadin application using the @Theme annotation.

Example: Using the @Theme annotation to apply the Material theme to the MyExporter embedded application.

@Theme(Material.class)
public class MyExporter
        extends WebComponentExporter<Div> {

The annotation @Theme(Material.class) applies the Material theme to the embedded application and it works the same as in regular Vaadin applications.

It’s enough to specify a theme in only one of the exporters of your application. If there is no theme declaration then the Lumo theme is used when available in the classpath as mentioned above.

Using Multiple Themes

Note
Compatibility Mode is no longer supported from Vaadin 14.12 onwards

It is not possible to use more than one theme in a single embedded application. Themes are detected during build time (or startup in compatibility mode’s development mode) and an exception is thrown if different themes are found.

If you need to use multiple themes, create multiple embedded applications (one per theme) and split the functionality accordingly. Each embedded application uses its own theme and the main application embeds several themed applications instead of one.

AB934D01-AF8E-4681-B209-B24196DB7007