> Markdown version of [Overview](https://vaadin.com/docs/v14/flow/styling/lumo/overview). Section index: [llms.txt](https://vaadin.com/docs/v14/flow/llms.txt)

# Lumo

Lumo is the default theme for all Vaadin applications and components, which can be customized to fit your visual style requirements.

The core Lumo package defines the basic building blocks for component themes as [CSS Custom Properties](https://vaadin.com/docs/v14/flow/styling/css-custom-properties.md) (also known as design tokens) such as colors, typography and other visual styles.

In addition to the custom properties, Lumo includes a ready-made [Badge](https://vaadin.com/docs/v14/flow/styling/lumo/badges.md) component and a collection of [Icons](https://vaadin.com/docs/v14/flow/styling/lumo/icons.md) which match the default Lumo visual style. It also has **light and dark modes** as built-in [Variants](https://vaadin.com/docs/v14/flow/styling/lumo/variants.md).

## <a id="getting-started"></a>Getting Started

The Lumo theme comes bundled with Vaadin, including all individual components. If you need, you can also install the core Lumo package separately from [npm](https://www.npmjs.com).

```terminal
npm i @vaadin/vaadin-lumo-styles
```

### <a id="import-and-include-style-sheets"></a>Import and Include Style Sheets

If you do not explicitly choose a theme, Lumo will be used. You can also explicitly choose to use it.

The global style sheets, which define the global custom properties (a.k.a. design tokens) and define basic color and typography rules, are automatically included in your Vaadin applications when you are using Lumo as your theme, excluding [Badges](https://vaadin.com/docs/v14/flow/styling/lumo/badges.md) which needs to be imported and included explicitly.

You can import and include these style sheets manually if needed, for example if you are building a client-side only application.

In server-side views (Java), use the `@Theme` annotation, as described in [Using Themes](https://vaadin.com/docs/v14/flow/styling/using-themes.md).

**Java** — `UsingComponentThemes.java`

```java
@Route(value = "")
@Theme(value = Lumo.class)
public class LumoApplication extends Div {
}
```

In client-side views, import and include the core style sheet.

**JavaScript** — `Lumo.js`

```javascript
// Import the main style sheets which set all the
// global custom properties
import '@vaadin/vaadin-lumo-styles/color.js';
import '@vaadin/vaadin-lumo-styles/typography.js';
import '@vaadin/vaadin-lumo-styles/sizing.js';
import '@vaadin/vaadin-lumo-styles/spacing.js';
import '@vaadin/vaadin-lumo-styles/style.js';
import '@vaadin/vaadin-lumo-styles/typography.js';
import '@vaadin/vaadin-lumo-styles/icons.js';
import '@vaadin/vaadin-lumo-styles/badges.js';
// Import the <custom-style> element from Polymer and include
// the style sheets in the global scope
import '@polymer/polymer/lib/elements/custom-style.js';

const style = document.createElement('custom-style');
style.innerHTML = `<style include="lumo-color lumo-typography"></style>`;
document.head.appendChild(style);
```

## <a id="customization"></a>Customization

The Lumo theme can be customized to fit your visual style requirements by adjusting the [CSS Custom Properties](https://vaadin.com/docs/v14/flow/styling/css-custom-properties.md) it exposes as its public API. See [Customization](https://vaadin.com/docs/v14/flow/styling/lumo/customization.md) for more information.

The custom properties are documented in the following sections:

- [Border](https://vaadin.com/docs/v14/flow/styling/lumo/border.md)

- [Color](https://vaadin.com/docs/v14/flow/styling/lumo/color.md)

- [Cursor](https://vaadin.com/docs/v14/flow/styling/lumo/cursor.md)

- [Icons](https://vaadin.com/docs/v14/flow/styling/lumo/icons.md)

- [Shadow](https://vaadin.com/docs/v14/flow/styling/lumo/shadow.md)

- [Sizing and Spacing](https://vaadin.com/docs/v14/flow/styling/lumo/sizing-and-spacing.md)

- [Typography](https://vaadin.com/docs/v14/flow/styling/lumo/typography.md)

## <a id="lumo-theme-editor"></a>Lumo Theme Editor

To quickly adjust most of the global styles of Lumo, you can use the [Lumo theme editor](https://demo.vaadin.com/lumo-editor/).

The Lumo theme editor is not yet an officially supported tool and does not necessarily support the latest versions of Vaadin. You can still use the CSS it produces by copying them to the correct files in your project.

Visit the Vaadin Labs page to [give feedback about the Lumo theme editor tool](https://vaadin.com/labs/lumo-editor).

`8E3F2346-2D53-4070-8FF1-A9F426FD9760`