Using a Theme in Multiple Applications

How to use a theme in multiple applications.

An application theme can be used in multiple applications by packaging it as a JAR dependency as shown in the following steps.

First, create a new Maven project with the following structure and add your theme files to the theme folder (1):

[project root]
├── src
│   └── main
│       └── resources
│           └── META-INF
│               └── resources
│                   └── themes
│                       └── my-theme  (1)
└── pom.xml

Second, update pom.xml as follows:

Configure the theme library’s identifiers and packaging format.
Configure the Vaadin platform version.
Add dependency management.
Update dependencies to only contain the com.vaadin.vaadin.

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
    http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <!-- Identifiers --> (1)
    <groupId>com.example</groupId>
    <artifactId>mytheme</artifactId>
    <version>1.0</version>
    <packaging>jar</packaging>

    <properties>
        <maven.compiler.source>17</maven.compiler.source>
        <maven.compiler.target>17</maven.compiler.target>
        <vaadin.version>24.1.10</vaadin.version> (2)
    </properties>

    <dependencyManagement> (3)
        <dependencies>
            <dependency>
                <groupId>com.vaadin</groupId>
                <artifactId>vaadin-bom</artifactId>
                <version>${vaadin.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <dependencies> (4)
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-core</artifactId>
            <scope>provided</scope>
        </dependency>
    </dependencies>

</project>

Third, if the theme uses npm assets, add a Dependencies.java class (1) with the corresponding @NpmPackage annotations:

[project root]
└── src
    └── main
        └── java
            └── com
                └── vaadin
                    └── flow
                        └── theme
                            └── Dependencies.java  (1)

Note

Dependency Class Package

The package in which the java class is placed doesn’t have to be com.vaadin.flow.theme package as in the example above, but it’s recommended for themes that are going to be used in Vaadin Spring Boot applications, as it’s always automatically scanned.

Other recommended packages are com.vaadin.flow.component and com.vaadin.shrinkwrap. See Vaadin’s Spring package scanning documentation for using other custom packages.

Last, create the JAR file by running the command mvn install in the project root folder. The file is generated in the target sub-folder.

To use the packaged theme in an application, add the JAR as a dependency in the application project’s pom.xml, and apply the theme either using the @Theme annotation, or in theme.json as a parent-theme to the application’s own theme.

<dependencies>
  ...
  <dependency>
    <groupId>com.example</groupId>
    <artifactId>mytheme</artifactId>
    <version>1.0</version>
  </dependency>
</dependencies>

382e21ad-6454-4af0-8224-7fdf50c812bb

Documentation

Documentation

Using a Theme in Multiple Applications