3.5.8.3.1. Creating Hover Dark Theme

Here you can find the steps to create a Hover Dark theme, which will be a dark variation of the default Hover theme. The sample application with this theme is available on GitHub.

  1. Create the new hover-dark theme in your project following the instructions in Creating a Custom Theme section.

    The required file structure will be created in the web module. The webThemesModule module and its configuration will be automatically added to the settings.gradle and build.gradle files.

  2. Override the default style variables in the hover-dark-defaults.scss file, i.e. replace the variables in it by the following ones:

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

$v-app-background-color: #262626;
$v-background-color: lighten($v-app-background-color, 12%);
$v-border: 1px solid (v-tint 0.8);
$font-color: valo-font-color($v-background-color, 0.85);
$v-button-font-color: $font-color;
$v-font-color: $font-color;
$v-link-font-color: lighten($v-focus-color, 15%);
$v-link-text-decoration: none;
$v-textfield-background-color: $v-background-color;

$cuba-hover-color: #75a4c1;
$cuba-maintabsheet-tabcontainer-background-color: $v-app-background-color;
$cuba-menubar-background-color: lighten($v-app-background-color, 4%);
$cuba-tabsheet-tab-caption-selected-color: $v-font-color;
$cuba-window-modal-header-background: $v-background-color;

$cuba-menubar-menuitem-border-radius: 0;

  3. Using the cuba.themeConfig application property define the themes you want to make available in the application:

    cuba.themeConfig = com/haulmont/cuba/hover-theme.properties /com/company/demo/web/hover-dark-theme.properties

As the result, both themes will be available in the application: the default Hover theme and its dark variation.

hover dark