> Markdown version of [Custom Theme](https://vaadin.com/docs/v24/tools/dspublisher/custom-theme). Section index: [llms.txt](https://vaadin.com/docs/v24/tools/llms.txt)

# Custom Theme for Rendered UI Examples

The rendered UI examples within the documentation pages can use a custom theme, which is the same theme you would use for applications you create with your design system.

A theme for rendered UI examples is used from a Maven repository, such as Maven Central or a local repository. Once you’ve [created an application theme](https://vaadin.com/docs/v24/styling/application-theme.md) and [packaged it as a JAR file](https://vaadin.com/docs/v24/styling/advanced/multi-app-themes.md), you can install it in a repository.

Once the theme is installed in a repository, you can use it by adding a dependency for it to the `pom.xml` file in the documentation project’s root folder:

`pom.xml`

```xml
<dependencies>
  ...
  <dependency>
    <groupId>com.example</groupId>
    <artifactId>exampletheme</artifactId>
    <version>1.0</version>
  </dependency>
</dependencies>
```

Next, the theme needs to be applied to the component examples. Set it as the [parent theme](https://vaadin.com/docs/v24/styling/advanced/parent-and-sub-themes.md) for the default "docs" theme by adding `"parent": "exampletheme"` to the `theme.json` file, in the `frontend/themes/docs/` directory, as shown in the following:

`frontend/themes/docs/theme.json`

```json
{
  "lumoImports": ["typography", "color", "spacing", "badge", "utility"],
  "parent": "exampletheme"
}
```

The website needs to be rebuilt — or restarted in development mode — in order for the change to take effect.

> **Note: UI Examples Theme vs. Website Styling**
>
> This page is about the theme used for rendered UI examples. This is distinct from the documentation website’s styles covered in the [Site Customization](https://vaadin.com/docs/v24/tools/dspublisher/customization.md) documentation.

`28290DCF-3F92-4ECE-B72D-32641359C096`