Documentation versions (currently viewingVaadin 23)

You are viewing documentation for Vaadin 23. View latest documentation

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.


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