Styling

Applying the linkki theme

A theme can be applied by adding the annotation @StyleSheet to a class that implements the interface AppShellConfigurator. The linkki theme can be referred using the constant LinkkiTheme#STYLESHEET.

In a Spring Boot application, the application configuration class can be used as AppShellConfigurator.

AppShellConfigurator in a Spring Boot application
@StyleSheet(LinkkiTheme.STYLESHEET)
@SpringBootApplication
public class Application extends SpringBootServletInitializer
                         implements AppShellConfigurator {
  ...
}

In a CDI application, a dedicated class can be created for this purpose. The only requirement for this class is to be in application scope.

AppShellConfigurator in a CDI application
@ApplicationScoped
@StyleSheet(LinkkiTheme.STYLESHEET)
public class MyAppShellConfigurator implements AppShellConfigurator {
    ...
}

Note that the linkki theme is based on Lumo theme and does not work with Aura.

Applying the F10 Theme

The F10 theme is a derivative of the linkki theme with a customized color set of its developing company Faktor Zehn. F10 theme can be integrated in the same way as linkki theme and can be referred using the constant org.linkki.core.ui.theme.F10ProductTheme.STYLESHEET.

Setting a Primary Color in F10 product theme

To customize the primary color, follow Vaadin styling documentation to apply a custom CSS file, e.g. styles.css.

The primary color can then be customized within the styles.css. It is set via the following three CSS properties:

  • --f10-primary-color-h

  • --f10-primary-color-s

  • --f10-primary-color-l

These properties automatically generate additional color variations, such as --lumo-primary-text-color. Most other values are derived from these settings and usually do not require further customization.

In total, the following constants are available:

  • --f10-primary-color-h: Primary color value (default: 206)

  • --f10-primary-color-s: Primary color saturation (default: 100%)

  • --f10-primary-color-l: Primary color relative brightness (default: 30%)

  • --f10-primary-color: Primary color. By default, calculated from --f10-primary-color-h, --f10-primary-color-s and f10-primary-color-l.

  • --f10-primary-contrast-color: Primary color contrast. For example, used for text within the application header and derived by default.