Packaging a Theme for Reuse

A custom theme can be packaged into a JAR file for use in multiple applications as follows:

  1. Create a new Maven project with the following structure and add your theme files to the theme folder (1):

    filesystem

    1. [project root]
    2. ├── src
    3. │   └── main
    4. │       └── resources
    5. │           └── META-INF
    6. │               └── resources
    7. │                   └── themes
    8. │                       └── my-theme  (1)
    9. └── pom.xml
    Important
    Do not include generated theme file
    Do not include the automatically generated <theme-name>.generated.js file inside the packaged theme artifact. The file is automatically created in an application project that uses the theme. Including it in the theme can cause errors for such a project.

  2. Update pom.xml as follows:

    • Add the Vaadin version property:

      pom.xml

      1. <vaadin.version>14.6.0</vaadin.version>

    • Add dependency management:

      XML

      1. <dependencyManagement>
      2.   <dependencies>
      3.     <dependency>
      4.       <groupId>com.vaadin</groupId>
      5.       <artifactId>vaadin-bom</artifactId>
      6.       <version>${vaadin.version}</version>
      7.       <type>pom</type>
      8.       <scope>import</scope>
      9.     </dependency>
      10.   </dependencies>
      11. </dependencyManagement>

    • Update dependencies to only contain the following:

      XML

      1. <dependency>
      2.   <groupId>com.vaadin</groupId>
      3.   <artifactId>vaadin</artifactId>
      4.   <scope>provided</scope>
      5. </dependency>

  3. If the theme uses npm assets, as described in Style Sheets From npm Packages, add a Dependencies.java class (1) with the corresponding @NpmPackage annotations:

    filesystem

    1. [project root]
    2. └── src
    3.     └── main
    4.         └── java
    5.             └── com
    6.                 └── vaadin
    7.                     └── flow
    8.                         └── theme
    9.                             └── Dependencies.java  (1)
    Note
    Dependency class package
    The package in which the java class is placed does not have to be com.vaadin.flow.theme package as in the example above, but it is recommended for themes that are going to be used in Vaadin Spring Boot applications, as it is 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.

  4. Create the JAR with mvn install.

To use the packaged theme in an application, add the JAR as a dependency and apply the theme using the @Theme annotation.