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

5.5.7.1.3. Creating a Custom Theme

You can create one or several application themes in the project and give the users an opportunity to select the most appropriate one. Creating new themes also allows you to override the variables in the *-theme.properties files, which define a few server-side parameters:

Default dialog window size.
Default input field width.
Dimensions of some components (Filter, FileMultiUploadField).
Correspondence between icon names and constants of the com.vaadin.server.FontAwesome enumeration for using Font Awesome in standard actions and screens of the platform, if cuba.web.useFontIcons is enabled.

Creating a new theme

Below is the example of creating a Halo-based Facebook theme, which resembles the interface of a popular social network.

In CUBA Studio, open Project Properties section and click Create theme extension. Select halo and click Create. A Halo theme extension will be created in the project as described in the previous section.
Rename the themes/halo directory in the web module to themes/facebook, similarly replace halo by facebook in file names.
Copy to themes/facebook and rename the facebook-ext.scss file to facebook.scss, similarly copy and rename the facebook-ext-defaults.scss file to facebook-defaults.scss.

Create the new directory com.haulmont.cuba in themes/facebook and copy the app-component.scss file in it. Finally, you will get the following structure:

themes/
    facebook/
        branding/
            app-icon-login.png
            app-icon-menu.png
        com.company.application/
            app-component.scss
            facebook-ext.scss                   // theme SCSS
            facebook-ext-defaults.scss          // theme customizations
        com.haulmont.cuba/
            app-component.scss                  // cuba app-component include
        facebook.scss                           // main theme file
        facebook-defaults.scss                  // main theme variables
        favicon.ico
        styles.scss                             // entry point of SCSS build procedure

Edit the styles.scss file:

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

.facebook {
  @include facebook;
}

Edit the facebook.scss file:

@import "../halo/halo";

@mixin facebook {
  @include halo;
}

Edit the app-component.scss file inside com.haulmont.cuba:

@import "../facebook";

@mixin com_haulmont_cuba {
  @include facebook;
}

Copy the following variables to facebook-defaults.scss:

@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);

The files in the com.company.application directory are used to modify the theme for the current project. Now we don’t need any modifications, so remove the files content and leave them empty.
Create the facebook-theme.properties file in the src directory of the web module:
```
modules/
  web/
    src/
      com.company.application/
        web/
          facebook-theme.properties
```
and fill it with the following content:
```
@include=halo-theme.properties
```
You can use this file to override server-side theme variables from the halo-theme.properties file of the platform.
Add the following properties to the web-app.properties file:
```
cuba.web.theme = facebook
cuba.themeConfig = havana-theme.properties halo-theme.properties /com/company/application/web/facebook-theme.properties
```
The cuba.themeConfig property defines which themes will be available for the user in the Settings menu of an application.
Rebuild the application and start the server. Now the user will see the application in Facebook theme on first login, and will be able to choose between Facebook, Halo and Havana in the Help > Settings menu.

Modifying server-side theme parameters

In Halo theme, Font Awesome icons are used for standard actions and platform screens by default (if cuba.web.useFontIcons is enabled). In this case, you can replace a standard icon by setting the required mapping between the icon and the font element name in <your_theme>-theme.properties file. For example, to use "plus" icon for the create action in the new Facebook theme, the facebook-theme.properties file should contain the following:

@include=halo-theme.properties

cuba.web.icons.create.png = font-icon:PLUS

The fragment of the standard users browser screen in the Facebook theme with the modified create action: