# Styling

> All the ways in which you can style your Vaadin application, views, and components.

Parent index: [Vaadin Docs](https://vaadin.com/docs/v23/llms.txt)

## Overview

- [Styling](https://vaadin.com/docs/v23/styling.md): All the ways in which you can style your Vaadin application, views, and components.

## Getting Started

- [Getting Started](https://vaadin.com/docs/v23/styling/getting-started.md): A guide to get started with styling Vaadin apps and components.

## Lumo Theme

- [Lumo Theme](https://vaadin.com/docs/v23/styling/lumo.md): Description of the built-in Lumo theme that's used by default in Vaadin apps and components.
- [Variants](https://vaadin.com/docs/v23/styling/lumo/variants.md): Learn how to enable Lumo light, dark, and compact variants. Learn also about the component variants.
  - [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.
- [Design Tokens](https://vaadin.com/docs/v23/styling/lumo/design-tokens.md): The design tokens, such as colors, typography and other visual styles that define the Lumo theme.
  - [Styling Using Design Tokens](https://vaadin.com/docs/v23/styling/lumo/design-tokens/styling-using-design-tokens.md): Learn how to use Lumo design tokens to style your application and components.
  - [Typography](https://vaadin.com/docs/v23/styling/lumo/design-tokens/typography.md)
  - [Color](https://vaadin.com/docs/v23/styling/lumo/design-tokens/color.md)
  - [Size and Space](https://vaadin.com/docs/v23/styling/lumo/design-tokens/size-space.md)
  - [Shape](https://vaadin.com/docs/v23/styling/lumo/design-tokens/shape.md)
  - [Elevation](https://vaadin.com/docs/v23/styling/lumo/design-tokens/elevation.md)
  - [Interaction](https://vaadin.com/docs/v23/styling/lumo/design-tokens/interaction.md)
- [Utility Classes](https://vaadin.com/docs/v23/styling/lumo/utility-classes.md): Describes the the set of CSS utility classes included in Lumo that enable building any UI without custom CSS.
- [Figma Libraries](https://vaadin.com/docs/v23/styling/lumo/figma.md): Includes links to the official Vaadin Figma libraries that designers and developers can use to create pixel-perfect UI designs and prototypes.

## @Theme annotation

- [@Theme annotation](https://vaadin.com/docs/v23/styling/theme-annotation.md): Describes how to use the @Theme annotation.

## Custom Themes

- [Custom Themes](https://vaadin.com/docs/v23/styling/custom-theme.md): Learn how to create and use custom themes for styling your application.
- [Creating Custom Themes](https://vaadin.com/docs/v23/styling/custom-theme/creating-custom-theme.md): Instructions for creating a custom theme for your Vaadin application.
- [Custom Component Variants](https://vaadin.com/docs/v23/styling/custom-theme/custom-component-variants.md)
- [Theme Editor](https://vaadin.com/docs/v23/styling/custom-theme/theme-editor.md): An online theme editor which allows you to visually create a customized theme on top of the Lumo theme.
- [Packaging a Theme](https://vaadin.com/docs/v23/styling/custom-theme/custom-theme-packaging.md)
- [Theme Configuration](https://vaadin.com/docs/v23/styling/custom-theme/custom-theme-configuration.md)
- [Styling Components](https://vaadin.com/docs/v23/styling/custom-theme/styling-components.md)
- [Style Scopes](https://vaadin.com/docs/v23/styling/custom-theme/style-scopes.md)
- [CSS Custom Properties](https://vaadin.com/docs/v23/styling/custom-theme/css-custom-properties.md)

## Advanced Guides

- [Advanced Guides](https://vaadin.com/docs/v23/styling/advanced.md): A collection of advanced guides related to styling.
- [Material Theme](https://vaadin.com/docs/v23/styling/advanced/material-theme.md): A theme inspired by the original Material Design guidelines.
  - [Typography](https://vaadin.com/docs/v23/styling/advanced/material-theme/typography.md)
  - [Color](https://vaadin.com/docs/v23/styling/advanced/material-theme/color.md)
- [@NoTheme annotation](https://vaadin.com/docs/v23/styling/advanced/notheme-annotation.md): Disable Lumo using the @NoTheme annotation
- [Importing Standalone Style Sheets](https://vaadin.com/docs/v23/styling/advanced/importing-stylesheets.md): Describes how to import standalone style sheets using the @CssImport or @StyleSheet annotations.