5.5.7.1.4. Using Themes from Application Components

If your project contains an application component with custom theme, you can use this theme for the whole project.

In the following example we will use the facebook theme from the Creating a Custom Theme section. Follow the steps to create the facebook theme for you app component.

  1. Install the app component using Studio menu as described in the Using Application Components section.

  2. Extend the halo theme in the project that uses your application component.

  3. By means of your IDE, rename all halo occurrences in themes directory, including file names, to facebook in order to get the following structure:

    themes/
    facebook/
        branding/
            app-icon-login.png
            app-icon-menu.png
        com.company.application/
            app-component.scss
            facebook-ext.scss
            facebook-ext-defaults.scss
        favicon.ico
        styles.scss

  4. The app-component.scss file aggregates theme modifications of the application component. During the SCSS build process, the Gradle plugin automatically finds the app components and imports them in the generated modules/web/build/themes-tmp/VAADIN/themes/{theme-name}/app-components.scss file.

    By default app-component.scss does not include variables modifications from {theme-name}-ext-defaults. To include variables modifications to app component bundle, you should import it manually in app-component.scss:

    @import "facebook-ext";
@import "facebook-ext-defaults";

@mixin com_company_application {
  @include com_company_application-facebook-ext;
}

    At this stage the facebook theme is already imported from the app component to the project.

  5. You can use facebook-ext.scss and facebook-ext-defaults.scss files inside the com.company.application package to override variables from app component’s theme and customize it for the concrete project. In this example we will use the facebook theme as is, so leave these files empty.

  6. Add the following properties to the web-app.properties file to make the facebook theme available in the Settings menu of the application. Use the relative path to reference facebook-theme.properties from the app component.

    cuba.web.theme = facebook
cuba.themeConfig = havana-theme.properties halo-theme.properties com/company/{app-component-name}/facebook-theme.properties
Tip

In case of any trouble with themes building check modules/web/build/themes-tmp directory. It contains all the files and generated app-component.scss includes, thus enabling you to investigate SCSS compilation problems.