Documentation

Documentation versions (currently viewingVaadin 23)
New Acceleration Kits: Observability Kit, SSO Kit, and Swing Kit. Read the blog post.

Theme Editor

An online theme editor which allows you to visually create a customized theme on top of the Lumo theme.

Where to Put the CSS

Instead of HTML imports and <custom-style>, which were used in earlier Vaadin versions, you should place the CSS in your custom theme’s document root style sheet. For example, frontend/themes/my-theme/document.css.

The CSS inside the "button-style" and "text-field-style" <dom-module> elements (in the editor’s output) should be placed in the corresponding component style sheets in your custom theme. For example, frontend/themes/my-theme/components/vaadin-button.css and frontend/themes/my-theme/components/vaadin-text-field.css.

Feedback

The theme editor isn’t an officially supported tool, but you can still report any issues and feature requests through the Vaadin Discord chat.

A98BC90E-BA7F-4802-94DA-067404813FA4