Documentation

Documentation versions (currently viewingVaadin 23)
Check out the new styling guides

Lumo Variants

Learn how to enable Lumo light, dark, and compact variants. Learn also about the component variants.

Lumo has global variants that you can use to quickly customize all components in your application. These global variants are:

  • Light and dark mode themes

  • Compact mode

In addition, many Vaadin components have their own built-in variants that can be used to style individual component instances quickly. For example, the Button component has built-in Primary, Secondary, and Error/Danger variants (and more) that you can use to style individual instances of the button.

Topics

Light and Dark Modes
Learn how to enable Lumo light and dark theme variants.
Compact Mode
Learn how to enable Lumo’s compact variant to reduce the font size and the sizing and spacing of all components.
Component Variants
Learn how to enable Lumo light, dark, and compact variants. Learn also about the component variants.