Theming

Theming

Lumo uses CSS custom properties to define typography, colors, sizing, spacing etc. Most visual styles can be achieved by tweaking these properties. For the more intricate theming use ThemableMixin.

Typography

https://cdn.vaadin.com/vaadin-lumo-styles/1.4.2/demo/typography.html

Property	Values	Example
`FontFamily`	`MONOSPACE`	`component.addClassName(LumoStyles.FontFamily.MONOSPACE);`
`FontSize`	`XXS`, `XS`, `S`, `M` (default), `L`, `XL`, `XXL`, `XXXL`	`UIUtils.setFontSize(FontSize.XL, component);`
`FontWeight`	`BOLD`, `BOLDER`, `LIGHTER`, `NORMAL`, `_100`, `_200`, `_300`, `_400`, `_500`, `_600`, `_700`, `_800`, `_900`	`UIUtils.setFontWeight(FontWeight.BOLD, component);`
`Headings`	`H1`, `H2`, `H3`, `H4`, `H5`, `H6`	`component.addClassName(LumoStyles.Heading.H1);`
`IconSize`	`S`, `M`, `L`	`UIUtils.createSmallIcon(VaadinIcon.HOME);`, `UIUtils.createLargeIcon(VaadinIcon.HOME);`
`TextColor`	`HEADER`, `BODY`, `SECONDARY`, `TERTIARY`, `DISABLED`, `PRIMARY`, `PRIMARY_CONTRAST`, `ERROR`, `ERROR_CONTRAST`, `SUCCESS`, `SUCCESS_CONTRAST`	`UIUtils.setTextColor(TextColor.SUCCESS, component);`

Colors

https://cdn.vaadin.com/vaadin-lumo-styles/1.4.2/demo/colors.html

Color	Values
`Base`	`BASE_COLOR`
`Primary`	`_10`, `_50`, `_100`
`Error`	`_10`, `_50`, `_100`
`Success`	`_10`, `_50`, `_100`
`Tint`	`_5`, `_10`, `_20`, `_30`, `_40`, `_50`, `_60`, `_70`, `_80`, `_90`, `_100`
`Shade`	`_5`, `_10`, `_20`, `_30`, `_40`, `_50`, `_60`, `_70`, `_80`, `_90`, `_100`
`Contrast`	`_5`, `_10`, `_20`, `_30`, `_40`, `_50`, `_60`, `_70`, `_80`, `_90`, `_100`

UIUtils.setBackgroundColor(LumoStyles.Color.Contrast._20, component);

Styles

https://cdn.vaadin.com/vaadin-lumo-styles/1.4.2/demo/styles.html

Color	Values	Example
`BorderRadius`	`S`, `M`, `L`, `_50`	`UIUtils.setBorderRadius(BorderRadius.L, component);`
`BoxShadowBorders`	`BOTTOM`, `LEFT`, `RIGHT`, `TOP`	`component.addClassName(BoxShadowBorders.BOTTOM);`
`Shadow`	`S`, `M`, `L`, `XL`	`UIUtils.setShadow(Shadow.L, component);`

Sizing and Spacing

https://cdn.vaadin.com/vaadin-lumo-styles/1.4.2/demo/sizing-and-spacing.html

Property	Size	Direction
`Margin`	`XS`, `S`, `M` (default), `L`, `XL`	`BOTTOM`, `LEFT`, `RIGHT`, `TOP`, `HORIZONTAL`, `VERTICAL`, `TALL`, `UNIFORM` (default), `WIDE`
`Padding`	`XS`, `S`, `M` (default), `L`, `XL`	`BOTTOM`, `LEFT`, `RIGHT`, `TOP`, `HORIZONTAL`, `VERTICAL`, `TALL`, `UNIFORM` (default), `WIDE`
`Spacing`	`XS`, `S`, `M` (default), `L`, `XL`	`BOTTOM`, `LEFT`, `RIGHT`, `TOP`, `HORIZONTAL`, `VERTICAL`, `TALL`, `UNIFORM` (default), `WIDE`

// Using class names
component.addClassNames(
  LumoStyles.Margin.Left.S,
  LumoStyles.Padding.Vertical.XL,
  LumoStyles.Spacing.Bottom.M
);
// FlexBoxLayout API
flexBoxLayout.setMargin(Left.S);
flexBoxLayout.setPadding(Vertical.XL);
flexBoxLayout.setSpacing(Bottom.S);

Utility Classes

A number of utility classes, most importantly UIUtils, were introduced to make theming more consistent and efficient. UIUtils can be used to create common button variants, labels and icons of different colors and sizes etc.

Buttons

The methods below accept String and/or VaadinIcon.

Variant	UIUtils method
Primary	`createPrimaryButton`
Tertiary	`createTertiaryButton`, `createTertiaryInlineButton`
Success	`createSuccessButton`, `createSuccessPrimaryButton`
Error	`createErrorButton`, `createErrorPrimaryButton`
Contrast	`createContrastButton`, `createContrastPrimaryButton`
Size	`createSmallButton`, `createLargeButton`

Combinations can be created with createButton(String, ButtonVariant…), createButton(VaadinIcon, ButtonVariant…) and createButton(String, VaadinIcon, ButtonVariant…).

// Primary button (text only)
UIUtils.createPrimaryButton("Primary");
// Success button (icon only)
UIUtils.createSuccessButton(VaadinIcon.CHECK);
// Error button (text and icon)
UIUtils.createErrorButton("Error", VaadinIcon.WARNING);
// Small tertiary button (text and icon)
UIUtils.createButton(
  "Small tertiary",
  VaadinIcon.HOME,
  ButtonVariant.LUMO_SMALL,
  ButtonVariant.LUMO_TERTIARY
);

Labels

Type	UIUtils method
Color	`createLabel(TextColor, String)`
Size	`createLabel(FontSize, String)`
Size & color	`createLabel(FontSize, TextColor, String)`
Heading	`createH1Label(String)`, `createH2Label(String)`, `createH3Label(String)`, `createH4Label(String)`, `createH5Label(String)`, `createH6Label(String)`

Icons

Variant	UIUtils method
Primary	`createPrimaryIcon(VaadinIcon)`
Secondary	`createSecondaryIcon(VaadinIcon)`
Tertiary	`createTertiaryIcon(VaadinIcon)`
Disabled	`createDisabledIcon(VaadinIcon)`
Success	`createSuccessIcon(VaadinIcon)`
Error	`createErrorIcon(VaadinIcon)`
Small	`createSmallIcon(VaadinIcon)`
Large	`createLargeIcon(VaadinIcon)`

Combinations can be created with createIcon(IconSize, TextColor, VaadinIcon).

Numbers

UIUtils method	Description
`formatAmount(Double)`	Formats a decimal amount for improved legibility.
`createAmountLabel(Double)`	Initialises a monospaced H5 label for improved legibility of decimal values.
`formatUnits(Integer)`	Formats an integer amount for improved legibility.
`createUnitsLabel(Integer)`	Initialises a monospaced H5 label for improved legibility of integer values.

Dates

UIUtils method	Description
`formatDate(LocalDate)`	Formats a `LocalDate` according to the format defined in `UIUtils`.

Misc

UIUtils method	Description
`setColSpan(Integer, Components…)`	Sets the column span for components in a `FormLayout`.
`createFloatingActionButton(VaadinIcon)`	Initialises a `Button` positioned in the bottom right corner of its container. Used for primary actions.
`createInitials(String)`	Creates an avatar with the given initials.

Customise the Utility Classes

It is advised to create and modify the utility classes according to your needs. Creating custom components and utility methods for reoccurring UI patterns will make the code more consistent and easier to maintain.

Updated 2021-03-08 Edit this article

Overview