Using 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 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.5.6</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 Other recommended packages are |
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