Documentation versions (currently viewingVaadin 24)

Advanced Styling Topics

Advanced topics on styling applications.

The following topics are covered in this section:

Creating Style Properties
How to create your own style properties.
Using a Theme in Multiple Applications
Steps and examples for using a theme in multiple applications.
Parent & Sub-Themes
Configuring parent themes, as well as sub-themes.
Loading Theme Resources from npm Packages
Describes how to load theme resources from npm packages.
Lazy-Loading Stylesheets
The basics of how to load large stylesheets only as needed.
Loading Stylesheets Dynamically
Explains how dynamically to load stylesheets.
Loading Theme Images from Java Code
Ensuring theme images are stored and loaded properly.
Run-time Theme Switching
Implementing multiple sets of styles within a single theme to be loaded dynamically.
Application Themes for Embedded Components
Things to consider when using a custom theme for embedded applications.
Shadow DOM Styling of Components
Details and instructions on isolating JavaScript and CSS from the surrounding page.
Disabling the Default Theme
Explains how to disable the Lumo theme for an application.