Creating and Using a Theme Add-on

A theme add-on is just a collection of SCSS files for a theme compilation.

The following conditions must be met:

  • The VAADIN/addons/<addon-name> structure is created in the JAR file.

  • The VAADIN/addons/<addon-name> directory contains the <addon-name>.scss file.

  • In the <addon-name>.scss file, mixin <addon-name> is declared.

  • The JAR file contains the Vaadin-Stylesheets key in the Manifest:

    jar.manifest {
attributes(['Vaadin-Stylesheets': 'VAADIN/addons/<addon-name>/<addon-name>.scss'])
}

All such JAR files will be used when compiling the theme.

You don’t need to compile themes in add-ons. If necessary, you can create an additional module with a demo in the add-on project.

Creating the Theme Add-on Using Studio

Follow the steps below to create a theme add-on using Jmix Studio:

  1. Create a new project. Select a theme-addon template. Enter the name of the project, for example, "themeaddon". It will be a simple Java project that has the following structure:

    structure add on

  2. Open the themeaddon.scss file and define your modifications inside the themeaddon mixin, for example:

    @mixin themeaddon {
   .jmix-sidemenu-panel
   .jmix-sidemenu-item
   .jmix-sidemenu-item-caption {
      font-size: 16px;
   }

   .v-button:not(.v-button-link) {
      background-image: none;
      background-color: #13418D;
   }
}

  3. Build and publish to local maven repository using the following command:

    Windows:
    gradlew clean assemble publishToMavenLocal
    Linux & macOS:
    ./gradlew clean assemble publishToMavenLocal

Using the Theme Add-on

  1. Open the project you want to apply the theme add-on.

  2. Create a custom theme.

  3. Open the build.gradle file and make the following changes:

    • add mavenLocal() to repositories;

    • include add-on dependency to the project:

      implementation 'com.company:themeaddon:0.0.1-SNAPSHOT'

  4. Reload the project.