> Markdown version of [Theming](https://vaadin.com/docs/v24/flow/integrations/embedding/theming). Section index: [llms.txt](https://vaadin.com/docs/v24/flow/llms.txt)

# 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.

## <a id="assigning-a-theme"></a>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.

theme.json

```json
{
  "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.

`MyExporter.java`

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

### <a id="cssimport-in-embedded-applications"></a>CssImport in Embedded Applications

An [`@CssImport` annotation](https://vaadin.com/docs/v24/styling/legacy/css-import.md) 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.

theme.json

```json
{
  "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.

## <a id="using-multiple-themes"></a>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`