Using Themes from Application Components - CUBA Platform. Developer’s Manual

3.5.9.4. Using Themes from Application Components

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

To inherit the theme as is, simply add it to the cuba.themeConfig application property:

cuba.web.theme = {theme-name}
cuba.themeConfig = com/haulmont/cuba/hover-theme.properties /com/company/{app-component-name}/web/{theme-name}-theme.properties

In case you want to override some variables from the parent theme, you need to create a theme extension in your project first.

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 your app component.
Install the app component using Studio menu as described in the Example of Application Component section.
Extend the halo theme in the project that uses your application component.

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

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.
Now 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.
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 = com/haulmont/cuba/hover-theme.properties /com/company/{app-component-name}/web/facebook-theme.properties
```

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.