Theming Embedded Applications
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> {
...
}Using Multiple Themes
It isn’t possible to use more than one theme in a single embedded application. Themes are detected during build time 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.
B68ECBA6-989D-4AC6-89D9-5EAD4C65A964