Documentation versions (currently viewingVaadin 14)

You are viewing documentation for an older Vaadin version. View latest documentation

Customizing Lumo

Use CSS custom properties to adjust Lumo to fit the needs of your application.


Fonts and Colors

The most common theme customization is to adjust the global font and color properties.

html {
  --lumo-font-family: Arial, Helvetica, sans-serif;
  --lumo-primary-text-color: hsl(265, 88%, 44%);
  --lumo-primary-color: hsl(265, 90%, 52%);
  --lumo-primary-color-50pct: hsla(265, 90%, 52%, 0.5);
  --lumo-primary-color-10pct: hsla(265, 90%, 52%, 0.1);