4.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.

  1. 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.

  2. Rename the themes/halo directory in the web module to themes/facebook, then move to facebook and rename the halo-ext.scss file to facebook.scss, similarly move and rename the halo-ext-defaults.scss file to facebook-defaults.scss:

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

  3. Edit the styles.scss file:

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

.facebook {
  @include facebook;
}

.v-theme-version {
  display: none;
}

  4. Edit the facebook.scss file:

    @import "../halo/halo";

@mixin facebook {
  @include halo;
}

  5. Edit the app-component.scss file:

    @import "facebook";

@mixin com_company_application {
  @include facebook;
}

  6. Copy the following variables to facebook-defaults.scss:

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

  7. Create the facebook-theme.properties file in the src directory of the web module 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.

  8. Add the following properties to the web-app.properties file:

    cuba.web.theme = facebook
cuba.themeConfig = havana-theme.properties halo-theme.properties facebook-theme.properties

  9. 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 web/src/facebook-theme.properties file should contain the following:

@include=halo-theme.properties

cuba.web.icons.create.png = PLUS

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

gui theme facebook 1