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

# Lumo Variants

The Lumo theme comes with two color variants: *light*, which is the default; and *dark*. It also includes a *compact* preset that can be applied simultaneously with the color variants. These are essentially predefined customizations of Lumo’s [style properties](https://vaadin.com/docs/v24/styling/lumo/lumo-style-properties.md).

## <a id="light-dark-variants"></a>Light & Dark Variants

In the screenshot here, you can see the difference between the default light color variant on the left, and the dark variant on the right — which are both built into Lumo.

[Image: Lumo theme Light and Dark variants]

The dark variant can be applied statically to the entire UI. In Flow, this can be done by using the `@Theme` annotation on the class that implements the `AppShellConfigurator` interface. In Hilla, the same can be achieved by setting the `theme` attribute on the root `<html>` element:

```java
@Theme(variant = Lumo.DARK)
public class Application extends implements AppShellConfigurator {
  ...
}
```

```typescript
document.documentElement.setAttribute('theme', 'dark');
```

You can customize the colors for the dark theme variant. See [Lumo Colors](https://vaadin.com/docs/v24/styling/lumo/lumo-style-properties/color.md) for details.

The variant can be restricted to certain parts of the UI, including individual components. In Flow, this can be done through the `ThemeList` or `Element` API, depending on the component.

**Java**

```java
VerticalLayout layout = new VerticalLayout();
layout.getThemeList().add(Lumo.DARK);

Div div = new Div();
div.getElement().setAttribute("theme", Lumo.DARK);
```

**Lit**

```html
<vaadin-vertical-layout theme="dark"></vaadin-vertical-layout>

<div theme="dark"></div>
```

**React**

```tsx
<VerticalLayout {...{ theme: 'dark' }}></VerticalLayout>

<div {...{ theme: 'dark' }}></div>
```

In addition to applying the dark variant statically, applications can allow the user to switch dynamically between the light and dark variants. This is done in Flow by applying them to the `UI` class.

**Java**

```java
@Route("")
public class MainView extends VerticalLayout {

    public MainView() {
        Button toggleButton = new Button("Toggle theme variant", click -> {
            ThemeList themeList = UI.getCurrent().getElement().getThemeList();

            if (themeList.contains(Lumo.DARK)) {
                themeList.remove(Lumo.DARK);
            } else {
                themeList.add(Lumo.DARK);
            }
        });

        add(toggleButton);
    }
}
```

**Lit**

```ts
<vaadin-button
  @click="${() => {
    const root = document.documentElement;
    if (root.getAttribute('theme') === 'dark') {
      root.removeAttribute('theme');
    } else {
      root.setAttribute('theme', 'dark');
    }
  }}"
>
  Toggle theme variant
</vaadin-button>
```

**React**

```tsx
<Button
  onClick={() => {
    const root = document.documentElement;
    if (root.getAttribute('theme') === 'dark') {
      root.removeAttribute('theme');
    } else {
      root.setAttribute('theme', 'dark');
    }
  }}
>
  Toggle theme variant
</Button>
```

The dark variant can also be applied automatically based on the operating system’s [light and dark mode setting](https://cookbook.vaadin.com/os-light-dark-theme). It’s exposed to the browser through the `prefers-color-scheme` CSS feature.

## <a id="compact-preset"></a>Compact Preset

Lumo also has a compact preset that reduces fonts sizes — and proportionally all Vaadin components. It’s applied by loading an additional JavaScript module containing a modified set of Lumo sizing properties:

```java
@JsModule("@vaadin/vaadin-lumo-styles/presets/compact.js")
public class MainLayout extends VerticalLayout {
  ...
}
```

```typescript
import '@vaadin/vaadin-lumo-styles/presets/compact.js';
```

`6edf45a5-74c9-4775-a0ad-48d822264ffe`