Docs

Docs

Theming Embedded Applications

How to theme an embedded application.

Theming 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’s found in the classpath), or no theme at all.

Assigning a Theme

To set a theme for an embedded component, the @Theme annotation should be set on the class implementing WebComponentExporter for the web component. The exporter class is also the recommended place to place @NpmPackage annotations, if any are needed.

As a general note, any @font-face declarations should be put in a document.css file in the theme folder, or use the documentCss key in theme.json for npm imports.

{
  "documentCss": ["@fortawesome/fontawesome-free/css/all.css"]
}

Both of these are also put into the head element for the embedded components, which otherwise inject styles to the shadow root of the embedded component.

All other styles are only available inside the web component shadow root and don’t reach the outlying context.

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

CssImport in Embedded Applications

An @CssImport annotation can be injected automatically into an embedded application’s shadow root. Set the theme property of autoInjectGlobalCssImports in theme.json to true — it’s false, by default.

{
  "autoInjectGlobalCssImports": true
}

This is useful when an embedded application uses a component that uses @CssImport annotation to import global styles. The autoInjectGlobalCssImports ensures that global styles are also applied inside the embedded application’s shadow root.

Using Multiple Themes

It isn’t possible to use more than one theme in a single embedded application. Themes are detected during build time. An exception is thrown if different themes are found.

If you need to use multiple themes, though, create multiple embedded applications (i.e., 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.

B68ECBA6-989D-4AC6-89D9-5EAD4C65A964