3.5.8.3.2. Creating Facebook 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, click CUBA > Advanced > Manage themes > Create custom theme. Set the theme name - facebook, select halo as the base theme and click Create. The new theme directory will be created in the project:

    themes/
    facebook/
        branding/
            app-icon-login.png
            app-icon-menu.png
        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

    The styles.scss file contains the list of your themes:

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

.facebook {
  @include facebook;
}

    The facebook.scss file:

    @import "../halo/halo";

@mixin facebook {
  @include halo;
}

    The app-component.scss file inside com.haulmont.cuba:

    @import "../facebook";

@mixin com_haulmont_cuba {
  @include facebook;
}

  2. Modify the theme variables in facebook-defaults.scss. You can do it in Studio by clicking Manage themes > Edit Facebook theme variables or in IDE:

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

  3. The facebook-theme.properties file in the src directory of the web module can be used to override the server-side theme variables from the halo-theme.properties file of the platform.

  4. The new theme has been automatically added to the web-app.properties file:

    cuba.web.theme = facebook
cuba.themeConfig = com/haulmont/cuba/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.

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

facebook theme