> Markdown version of [Variants](https://vaadin.com/docs/v23/styling/lumo/variants). Section index: [llms.txt](https://vaadin.com/docs/v23/styling/llms.txt)

# Lumo 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](https://vaadin.com/docs/v23/components.md) have their own built-in variants that can be used to style individual component instances quickly. For example, the [Button](https://vaadin.com/docs/v23/components/button.md) component has built-in Primary, Secondary, and Error/Danger variants (and more) that you can use to style individual instances of the button.

## <a id="topics"></a>Topics

- [Light and Dark Modes](https://vaadin.com/docs/v23/styling/lumo/variants/light-dark.md): Learn how to enable Lumo light and dark theme variants.
- [Compact Mode](https://vaadin.com/docs/v23/styling/lumo/variants/compact.md): Learn how to enable Lumo's compact variant to reduce the font size and the sizing and spacing of all components.
- [Component Variants](https://vaadin.com/docs/v23/styling/lumo/variants/component-variants.md): Learn how to enable Lumo light, dark, and compact variants. Learn also about the component variants.