3.5.8.4. 使用应用程序组件中的主题

如果项目包含带有自定义主题的应用程序组件，则可以将此主题用于整个项目。

要按原样继承主题，只需将其添加到cuba.themeConfig应用程序属性：

cuba.web.theme = {theme-name}
cuba.themeConfig = com/haulmont/cuba/hover-theme.properties /com/company/{app-component-name}/{theme-name}-theme.properties

如果要覆盖父主题中的某些变量，则首先需要在项目中创建主题扩展。

在下面的例子中，我们将使用创建自定义主题部分中的 facebook 主题。

• 按照步骤为应用程序组件创建 facebook 主题。

• 使用 Studio 菜单安装应用程序组件，如应用程序组件示例部分所述。

• 在使用应用程序组件的项目中扩展 halo 主题。

• 通过 IDE，将 themes 目录下的所有文件名中的 halo 重命名为 facebook，以获得以下结构：

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

• app-component.scss 文件合并应用程序组件的主题修改。在 SCSS 构建过程中，Gradle 插件会自动查找应用程序组件并将其导入生成的 modules/web/build/themes-tmp/VAADIN/themes/{theme-name}/app-components.scss 文件中。

默认情况下，app-component.scss 不包含来自 {theme-name}-ext-defaults 的变量改动。要包含变量改动到 app 组件包，需要在 app-component.scss 中手动导入：

@import "facebook-ext";
@import "facebook-ext-defaults";
@mixin com_company_application {
  @include com_company_application-facebook-ext;
}

在这个阶段，facebook 主题已经从 app 组件导入到项目中。

• 现在，可以使用 com.company.application 包中的 facebook-ext.scss 和 facebook-ext-defaults.scss 文件覆盖 app 组件主题中的变量，并为具体项目自定义变量。

• 将以下属性添加到 web-app.properties 文件中，以使应用程序的 Settings 菜单中的 facebook 主题可用。使用相对路径从 app 组件引用 facebook-theme.properties。

cuba.web.theme = facebook
cuba.themeConfig = com/haulmont/cuba/hover-theme.properties /com/company/{app-component-name}/facebook-theme.properties