Styling

Variants of the linkki theme

linkki theme has several variants that can be used to customize all components.

Variants

Card sections ("card-sections")

Card like design for all linkki sections. When used as a default variant, sections in dialogs are not affected, except the theme is explicitly set on a dialog or a child layout.

Compact ("compact")

Smaller spaces for a more compact look.

Form Item Label Start ("form-item-label-start")

Left aligned labels on form items. The variant doesn’t need to be applied to the entire application, but can also be applied to single layouts using @BindVariantNames.

The variant names are also available as constants in the class LinkkiTheme.

Table 1. CSS properties in theme compact
Functionality Property Default Value

Extra large size

--lumo-size-xl

3rem

Large size

--lumo-size-l

2.5rem

Medium size

--lumo-size-m

2rem

Small size

--lumo-size-s

1.75rem

Extra small size

--lumo-size-xs

1.5rem

Extra large space

--lumo-space-xl

2rem

Large space

--lumo-space-l

1.375rem

Medium space

--lumo-space-m

0.7rem

Small space

--lumo-space-s

0.35rem

Extra small space

--lumo-space-xs

0.2rem

Applying a variant

In general, theme variants can be added at runtime with UI.getCurrent().getElement().getThemeList().add.

When using ApplicationLayout, default variants that should apply initially can be set in ApplicationConfig.

A toggle for theme variants can also be built into the application menu.