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 set a few server-side parameters:

  • Default dialog window size.

  • Default input field width.

  • Dimensions of some components (Filter, FileMultiUploadField).

  • Correlation 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.

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

  1. Open Project properties section in CUBA Studio 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 rename the halo-ext.scss file inside it to facebook.scss, and halo-ext-defaults.scss to facebook-defaults.scss.

  3. Edit the styles.scss file by changing the halo-ext imports and the halo root selector: 

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

.facebook {
  @include facebook;
}

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

  4. Edit the facebook.scss file and replace @mixin halo-ext: 

    @import "../halo/halo";

@mixin facebook {
  @include halo;
}

  5. 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);

  6. Create a facebook-theme.properties file in the src directory of the web module: 

    @include=halo-theme.properties

    If necessary, you can use this file to override server-side theme variables from the halo-theme.properties file of the platform.

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

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

Prev  Up  Next
  Home