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

# Material Variants

Material has global variants that you can use to quickly customize all components and built-in component variants that can be used to style individual component instances quickly.

## <a id="dark-mode"></a>Dark Mode

Dark mode is commonly used in low-light environments or during night-time.

In server-side views, use the `variant` attribute of the `@Theme` annotation. See [Using Themes](https://vaadin.com/docs/v14/flow/styling/using-themes.md) for more information.

**Java** — `UsingComponentThemes.java`

```java
@Theme(value = Material.class, variant = Material.DARK)
```

In client-side views, set the `theme` attribute on the `<html>` element.

**JavaScript** — `ThemeVariants.js`

```javascript
document.documentElement.setAttribute("theme", "dark");
```

**HTML** — `ThemeVariants.html`

```html
<html theme="dark">
```

You can also use the same attribute on any element which is in the global style scope (see [Style Scopes](https://vaadin.com/docs/v14/flow/styling/style-scopes.md)).

For server-side components, you can use the [Element API](https://vaadin.com/docs/v14/flow/element-api/tutorial-properties-attributes.md) to set the attribute value. Some components offer specific API for setting theme variants.

```java
VerticalLayout dark = new VerticalLayout();
dark.getElement().setAttribute("theme", Lumo.DARK);
```

For client-side components/templates you can add the attribute directly to the HTML element.

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

## <a id="component-variants"></a>Component Variants

You can find a component’s Material variants from the [Material theme example site](https://cdn.vaadin.com/vaadin-material-styles/1.3.2/demo/).

`1C0334A4-6A37-4DDF-9344-3ADAD85039A1`