Documentation

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

Legacy theme in MPR

By default the theme used with MPR is "valo" and this can be changed with adding the MprTheme annotation with the wanted theme name to your AppShellConfigurator configuration class.

Note
Runtime changing of the theme isn’t supported
@MprTheme("reindeer")
public class Configuration implements AppShellConfigurator {
}

public class MainLayout extends Div implements RouterLayout {
}

@Route(value = "", layout = MainLayout.class)
public class RootTarget extends Div {
    public RootTarget() {
      LegacyWrapper addressbookWrapper = new LegacyWrapper(
                  new AddressbookLayout());
      add(addressbookWrapper);
    }
}

The theme can be a old legacy styles.css theme or a styles.scss theme. With a Sass-based theme, on-the-fly compilation works out of the box without any changes.

Using your custom theme

Using your own Vaadin legacy theme remains the same as it was. Create your theme by following the instructions in the themes documentation for Vaadin 7 or Vaadin 8.

Then add the @MprTheme annotation with your theme name on the AppShellConfigurator instance and your theme is used for the legacy framework part.

Note
Legacy theme is applied only when a view has legacy components
Styles for non-legacy components shouldn’t be included in the legacy theme.

38233D6E-8B3F-4DB4-B5EF-DC0E4785FB91