Themes - Lumo/Aura - how to use them?

Flow
1

I just created Vaadin 25 empty project and played with

@StyleSheet(Lumo.STYLESHEET)
and
@StyleSheet(Aura.STYLESHEET)

I see that existing Vaadin components (like Button) change theme and it works as expected.

But if I create something like this:

@Route("")
public class ExampleView extends VerticalLayout {

  public ExampleView() {
    Span badge = new Span("Hello World");
    badge.getElement().getThemeList().add("badge success");
    add(badge);
    VerticalLayout verticalLayout = new VerticalLayout();
    verticalLayout.getStyle()
        .set("border", "2px solid var(--lumo-contrast-10pct)");
    verticalLayout.add(new Button("Click me"));
    add(verticalLayout);
  }
}

Badges & borders work only with Lumo.STYLESHEET. It’s kinda logical for border not to work because I’m using lumo variable. But for badges it’s probably some bug. If I want to change theme for some existing large project where I have some custom styling using Lumo variables I need to rewrite all that. I can add both of these themes but that has weird visual effects :D

And then I was wondering what was idea behind these themes. Is it just to choose one on the start of the project and probably never change it?

2

As far as I’ve understood it: yes, it’s not really intended to switch them on the fly (sadly).

I’ve got the feeling that badges are also special in aura: see web-components/dev/aura/badge.css at main · vaadin/web-components · GitHub

1 Like
3

Aura doesn’t support the badge styles at this point. The plan was to add an actual component, instead of using the awkward theme list API, which would have themes for both Aura and Lumo.

As for borders specifically, there are --vaadin-border-color and --vaadin-border-color-secondary, which work with both Aura and Lumo.

Edit: The base CSS properties that should work with both themes are documented here: Base Styles Reference

1 Like