Java/Vaadin - Using different theme for individual Views

Question

Short version: Does Vaadin support using different themes for different views/layouts/components in a running application?

Longer version: I'm trying to achieve some very basic functionality/"modularity" where a class is provided which extends View, and is then added to a specific container. That works "ok" currently, using the approach seen here https://stackoverflow.com/a/60775/3560336, to find a specific class. But this view will now use the theme which is used in the main UI for my application. Is there any way to allow this view (or whatever else it could be, e.g. CustomComponent), to be using another theme?

Answer 1

As far as I know the themes are switchable during runtime (see sample code below), but they're set on a global/UI level. If the views change entirely and you don't have any common sections that must not change, such as a menu bar, this may work for you.

public class MyUI extends UI {
    @Override
    protected void init(VaadinRequest request) {
        VerticalLayout content = new VerticalLayout();
        content.setSizeFull();
        setContent(content);

        content.addComponent(new TextField());
        content.addComponent(new Button("Switch theme", e -> {
            if (getTheme().equals("mytheme1")) {
                setTheme("mytheme2");
            } else {
                setTheme("mytheme1");
            }
        }));
    }
}

Otherwise, the theming engine allows you to define your own styles (or even overwrite default ones) for your various components and apply them using addStyleName():

Java class:

myButton.addStyleName("red-border");

Theme config:

@mixin mytheme1 {
  @include valo;
  // Insert your own theme rules here

  .red-border {
    // custom style added with addStyleName()
    border: 1px red solid;
  }

  .v-button {
    // global override of default v-button rule
    background-color: green;
  }
}