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.
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 the @NpmPackage annotations if any are needed.
As a general note any @font-face declarations should be put into a file document.css 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 will be put into the head element also for the embedded components that otherwise inject styles to the shadow root of the embedded component.
All other styles are only available inside the web component shadow root and do not reach the outlying context.
@Theme(Material.class)
public class MyExporter extends WebComponentExporter<Div> {
...
}Using Multiple Themes
It is not 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.