Docs

Docs

Custom Theme for Rendered UI Examples

Using a custom theme when rendering UI examples within documentation pages, the same theme for applications you create with your design system.

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 and packaged it as a JAR file, 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:

<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 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:

{
  "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 documentation.

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