# Styling

> A brief overview of styling Vaadin applications.

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

## Overview

- [Styling](https://vaadin.com/docs/v24/styling.md): A brief overview of styling Vaadin applications.

## Lumo

- [Lumo](https://vaadin.com/docs/v24/styling/lumo.md): Introduction to the built-in Lumo theme.
- [Lumo Style Properties](https://vaadin.com/docs/v24/styling/lumo/lumo-style-properties.md): The style properties of the built-in Lumo theme.
  - [Color](https://vaadin.com/docs/v24/styling/lumo/lumo-style-properties/color.md): Colors and their corresponding style properties defined in the Lumo theme.
  - [Typography](https://vaadin.com/docs/v24/styling/lumo/lumo-style-properties/typography.md): Tables of Lumo style properties related to displaying and formatting text.
  - [Size & Space](https://vaadin.com/docs/v24/styling/lumo/lumo-style-properties/size-space.md): Listing of Lumo style properties related to setting the size and spacing of text and components.
  - [Shape](https://vaadin.com/docs/v24/styling/lumo/lumo-style-properties/shape.md): Describing the Lumo style properties related to component shapes.
  - [Elevation](https://vaadin.com/docs/v24/styling/lumo/lumo-style-properties/elevation.md): Listing of Lumo elevation style properties, the visual stacking of elements in a UI.
  - [Interaction](https://vaadin.com/docs/v24/styling/lumo/lumo-style-properties/interaction.md): Lumo style properties related to how interactions are indicated in an application.
- [Lumo Variants](https://vaadin.com/docs/v24/styling/lumo/lumo-variants.md): Using the built-in light, dark, and compact variants in Lumo.
- [Utility Classes](https://vaadin.com/docs/v24/styling/lumo/utility-classes.md): List of Lumo utility classes and descriptions of them.

## Application Theme

- [Application Theme](https://vaadin.com/docs/v24/styling/application-theme.md): Recommendations on using a theme for styling an application.

## Styling Components

- [Styling Components](https://vaadin.com/docs/v24/styling/styling-components.md): Explanation and examples on how to customize the styling of Vaadin components.
- [Stylable Parts & States](https://vaadin.com/docs/v24/styling/styling-components/parts-and-states.md): Learn what stylable component parts and states are and how to use them when customizing the styles of Vaadin components.
- [Styling Component Instances](https://vaadin.com/docs/v24/styling/styling-components/styling-component-instances.md): Configuring and applying styles to specific instances of a component.
- [Sharing Styles with Component Types](https://vaadin.com/docs/v24/styling/styling-components/sharing-styles.md): Information on configuring styles for use among multiple components types.
- [Generating Styles Dynamically (Flow)](https://vaadin.com/docs/v24/styling/styling-components/generating-styles-dynamically.md): Examples of how to use the Style API to generate CSS.

## Styling Other UI Elements

- [Styling Other UI Elements](https://vaadin.com/docs/v24/styling/styling-other-elements.md): Describes how to apply styles to common and uncommon HTML elements.

## Advanced Styling Topics

- [Advanced Styling Topics](https://vaadin.com/docs/v24/styling/advanced.md): Advanced topics on styling applications.
- [Creating Style Properties](https://vaadin.com/docs/v24/styling/advanced/custom-style-properties.md): How to create your own style properties.
- [Using a Theme in Multiple Applications](https://vaadin.com/docs/v24/styling/advanced/multi-app-themes.md): Steps and examples for using a theme in multiple applications.
- [Parent & Sub-Themes](https://vaadin.com/docs/v24/styling/advanced/parent-and-sub-themes.md): Configuring parent themes, as well as sub-themes.
- [Importing Resources from npm Packages](https://vaadin.com/docs/v24/styling/advanced/npm-packages.md): Describes how to use resources like fonts, icons, and stylesheets from npm packages.
- [Lazy-Loading Stylesheets in Flow](https://vaadin.com/docs/v24/styling/advanced/lazy-loading-stylesheets.md): The basics of how to load large stylesheets only as needed.
- [Loading Stylesheets Dynamically in Flow](https://vaadin.com/docs/v24/styling/advanced/loading-styles-dynamically.md): Explains how dynamically to load stylesheets.
- [Run-time Theme Switching](https://vaadin.com/docs/v24/styling/advanced/runtime-theme-switching.md): Implementing multiple sets of styles within a single theme to be loaded dynamically.
- [Application Themes for Embedded Components](https://vaadin.com/docs/v24/styling/advanced/themes-for-embedded.md): Things to consider when using a custom theme for embedded applications.
- [Shadow DOM Styling of Components](https://vaadin.com/docs/v24/styling/advanced/shadow-dom-styling.md): Details and instructions on isolating JavaScript and CSS from the surrounding page.
- [Disabling the Default Theme in Flow](https://vaadin.com/docs/v24/styling/advanced/disabling-default-theme.md): Explains how to disable the Lumo theme for an application.

## Legacy Styling Features

- [Legacy Styling Features](https://vaadin.com/docs/v24/styling/legacy.md): List of legacy styling features that shouldn't be used.
- [Material Theme](https://vaadin.com/docs/v24/styling/legacy/material-theme.md): Information on the Material theme, which is not being developed further.
  - [Typography](https://vaadin.com/docs/v24/styling/legacy/material-theme/typography.md): Material theme style properties related to displaying and formatting text.
  - [Color](https://vaadin.com/docs/v24/styling/legacy/material-theme/color.md): Tables of colors used in the Material theme.
- [Flow CssImport Annotation](https://vaadin.com/docs/v24/styling/legacy/css-import.md): Information on the legacy CssImport annotation for importing stylesheets.