Skip to content

Latest commit

 

History

History
57 lines (42 loc) · 2.66 KB

web_theme_inheritance.adoc

File metadata and controls

57 lines (42 loc) · 2.66 KB
Raw
Using Themes from Application Components

If your project contains an application component with a custom theme, you can use this theme for the whole project.

To inherit the theme as is, simply add it to the cuba.themeConfig application property:

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

In case you want to override some variables from the parent theme, you need to create a theme extension in your project first.

In the following example we will use the facebook theme from the [web_theme_creation] section.

  1. Follow the steps to create the facebook theme for your app component.

  2. Install the app component using Studio menu as described in the [app_components_sample] section.

  3. Extend the halo theme in the project that uses your application component.

  4. By means of your IDE, rename all halo occurrences in themes directory, including file names, to facebook in order to get the following structure:

    link:../../../../../source/gui/themes/themes_28.scss[role=include]

  5. The app-component.scss file aggregates theme modifications of the application component. During the SCSS build process, the Gradle plugin automatically finds the app components and imports them in the generated modules/web/build/themes-tmp/VAADIN/themes/{theme-name}/app-components.scss file.

    By default app-component.scss does not include variables modifications from {theme-name}-ext-defaults. To include variables modifications to app component bundle, you should import it manually in app-component.scss:

    link:../../../../../source/gui/themes/themes_29.scss[role=include]

    At this stage the facebook theme is already imported from the app component to the project.

  6. Now you can use facebook-ext.scss and facebook-ext-defaults.scss files inside the com.company.application package to override variables from app component’s theme and customize it for the concrete project.

  7. Add the following properties to the web-app.properties file to make the facebook theme available in the Settings menu of the application. Use the relative path to reference facebook-theme.properties from the app component.

    link:../../../../../source/gui/themes/themes_30.scss[role=include]
Tip

In case of any trouble with themes building check modules/web/build/themes-tmp directory. It contains all the files and generated app-component.scss includes, thus enabling you to investigate SCSS compilation problems.