3.5.8.3.1. 创建 Hover Dark 主题

这里介绍创建 Hover Dark 主题的步骤,这个主题是默认 Hover 主题的暗色变体。使用此主题的示例应用程序可在 GitHub 上找到。

  1. 按照创建自定义主题部分中的说明在项目中创建新的 hover-dark 主题。

    会在 web 模块中创建所需的文件结构。新建的 webThemesModule 模块及其配置将自动被添加到 settings.gradlebuild.gradle 文件中。

  2. 重新设置 hover-dark-defaults.scss 文件中的默认样式变量,比如,可以用以下变量值替换其中的变量:

    @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. 使用 cuba.themeConfig 应用程序属性定义要在应用程序中使用的主题:

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

于是,在应用程序中将有两个主题将可用:默认 Hover 主题及其暗色变体。

hover dark