Creating a Reusable Theme - CUBA Platform. Developer’s Manual

3.5.8.5. Creating a Reusable Theme

Any theme can be packed and reused without an application component. To create a theme package, you need to create a Java project from scratch and bundle it in a single JAR file. Follow the steps below to create a distribution of facebook theme from the previous examples.

Create a new project with the following structure in IDE. It will be a simple Java project that consists of SCSS files and theme properties:

halo-facebook/
    src/                                            //sources root
        halo-facebook/
            com.haulmont.cuba/
                app-component.scss
            halo-facebook.scss
            halo-facebook-defaults.scss
            halo-facebook-theme.properties
            styles.scss

This sample theme project can be downloaded from GitHub.

build.gradle script:

allprojects {
    group = 'com.haulmont.theme'
    version = '0.1'
}

apply(plugin: 'java')
apply(plugin: 'maven')

sourceSets {
    main {
        java {
            srcDir 'src'
        }
        resources {
            srcDir 'src'
        }
    }
}

settings.gradle file:
```
rootProject.name = 'halo-facebook'
```

app-component.scss file:

@import "../halo-facebook";

@mixin com_haulmont_cuba {
  @include halo-facebook;
}

halo-facebook.scss file:

@import "../@import "../";

@mixin halo-facebook {
  @include halo;
}

halo-facebook-defaults.scss file:

@import "../halo/halo-defaults";

$v-background-color: #fafafa;
$v-app-background-color: #e7ebf2;
$v-panel-background-color: #fff;
$v-focus-color: #3b5998;
$v-border-radius: 0;
$v-textfield-border-radius: 0;
$v-font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
$v-font-size: 14px;
$v-font-color: #37404E;
$v-font-weight: 400;
$v-link-text-decoration: none;
$v-shadow: 0 1px 0 (v-shade 0.2);
$v-bevel: inset 0 1px 0 v-tint;
$v-unit-size: 30px;
$v-gradient: v-linear 12%;
$v-overlay-shadow: 0 3px 8px v-shade, 0 0 0 1px (v-shade 0.7);
$v-shadow-opacity: 20%;
$v-selection-overlay-padding-horizontal: 0;
$v-selection-overlay-padding-vertical: 6px;
$v-selection-item-border-radius: 0;

$v-line-height: 1.35;
$v-font-size: 14px;
$v-font-weight: 400;
$v-unit-size: 25px;

$v-font-size--h1: 22px;
$v-font-size--h2: 18px;
$v-font-size--h3: 16px;

$v-layout-margin-top: 8px;
$v-layout-margin-left: 8px;
$v-layout-margin-right: 8px;
$v-layout-margin-bottom: 8px;

$v-layout-spacing-vertical: 8px;
$v-layout-spacing-horizontal: 8px;

$v-table-row-height: 25px;
$v-table-header-font-size: 13px;
$v-table-cell-padding-horizontal: 5px;

$v-focus-style: inset 0px 0px 1px 1px rgba($v-focus-color, 0.5);
$v-error-focus-style: inset 0px 0px 1px 1px rgba($v-error-indicator-color, 0.5);

$v-show-required-indicators: true;

halo-facebook-theme.properties file:
```
@include=halo-theme.properties
```

Build and install the project with the Gradle task:
```
gradle assemble install
```
Add the theme to your CUBA-based project as a Maven dependency in two configurations: themes and compile, by modifying you build.gradle file:
```
configure(webModule) {
    //...
    dependencies {
        provided(servletApi)
        compile(guiModule)

        compile('com.haulmont.theme:halo-facebook:0.1')
        themes('com.haulmont.theme:halo-facebook:0.1')
    }
    //...
}
```
If you install the theme locally, don’t forget to add mavenLocal() to the list of repositories: open the Project Properties section in Studio and add the local Maven repository coordinates to the repositories list.

To inherit this theme and modify it in your project, you have to extend this theme. Extend the halo theme and rename themes/halo folder to themes/halo-facebook:

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

Modify styles.scss file:

@import "halo-facebook-defaults";
@import "com.company.application/halo-ext-defaults";
@import "app-components";
@import "com.company.application/halo-ext";

.halo-facebook {
  // include auto-generated app components SCSS
  @include app_components;

  @include com_company_application-halo-ext;
}

The last step is to define halo-facebook-theme.properties file in web-app.properties file:

cuba.themeConfig = com/haulmont/cuba/hover-theme.properties /halo-facebook/halo-facebook-theme.properties

Now, you can choose halo-facebook theme from Help > Settings menu or set the default theme using cuba.web.theme application property.