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.