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 the applications you create using 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 have created an application theme and packaged it as a JAR file, you can install it to a repository.
Once the theme is installed in a repository, you can use it by adding a dependency for it to the pom.xml 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.
Change the @Theme annotation in src/main/java/com/vaadin/demo/DemoExporter.java as shown in the following:
@Theme("exampletheme")
public abstract class DemoExporter<T extends Component> extends WebComponentExporter<T> {
...
}The website needs to be rebuilt, or restarted in development mode, in order for the change to take effect.
|
Note
|
Theme for UI Examples vs Website Styling
This article is about the theme used for rendered UI examples, which is distinct from the documentation website’s styles covered in the Site Customization documentation.
|
28290DCF-3F92-4ECE-B72D-32641359C096