Theming

Vaadin Designer supports theming the same way as Flow. When a design is opened, Vaadin Designer loads the theme, defined by the @Theme annotation and it loads all style sheets defined by any @CssImport, @StyleSheet, and @JsModule annotations.

You can change the component theme used by Designer from the project settings. Component themes have different look-and-feel, as well as styles declarations. Changing Designer component theme settings don’t affect your Flow project. Likewise, your Flow project theme settings aren’t reflected in Designer.

Designer component theme setting only affects how designs are rendered by Designer. Typically, you match this with your application’s component theme.

The default component theme is Lumo. The Material component theme is also available. Both themes have "light" and "dark" variants (see Dark Mode).

The user should provide all styling through the application theme, if the component theme None was selected.

The None component theme is used as a fallback if project is missing necessary dependencies for the selected theme, for example if vaadin-material-styles JAR isn’t available in the classpath.

Theme settings are be stored in your project’s root folder under .vaadin/designer/project-settings.json so that the settings can be preserved and thereby shared with everyone who works with Designer on the project.