Change styles, variants and themes in runtime

[mshabarov]

Tell us about your request

In Vaadin 25.0 the themes are just stylesheets that are added with @StyleSheet or page.addStyleSheet(), thus the "theme selection" feature becomes easy doable with a standard API. We should mention this on the high level as a concept. Here is an example (but can be polished/improved):

var remover = page.addStyleSheet(Lumo.STYLESHEET);
page.setColorScheme(ColorScheme.Value.DARK);
new Button("Change to Aura and light", click -> {
   remover.remove();
   page.setColorScheme(ColorScheme.Value.LIGHT);
   page.addStyleSheet(Aura.STYLESHEET);
});

Could go under https://vaadin.com/docs/latest/styling/advanced/dynamic-stylesheets.

---

If you think this issue is important, add a 👍 reaction to help the community and maintainers prioritize this issue.

[knoobie]

How does this adapt all other classes where I'm applying e.g. "LUMO_X" as theme to a component? 🥲

[mshabarov]

AFAIK Aura has no yet 100% match with Lumo in general. We are working on completing Aura in 25.1.
Ping @rolfsmeds for more insights.

[rolfsmeds]

That's correct, in that Aura currently lacks some component variants that Lumo has. Most of those will be added in Aura, but not all. But even then, it doesn't really solve the problem, as you should not use LUMO_ prefixed variants with Aura, or vice versa (even though most of them will work because they happen to map to identical theme attribute values).

This could be (mostly) addressed by introducing un-prefixed variant constants for variants that exist in both themes.

However, I'm not entirely sure switching between Aura and Lumo is something you'd actually want to do in a typical application, because they're hardly the only css used in the application, and whatever custom css you have is typically designed for Aura or Lumo. So you'd have to craft your custom css quite carefully to ensure it works well on top of both Aura and Lumo.

I think a much more typical use case is to switch between two or more custom themes (which are also just stylesheets), both of which are built on top of either Aura or Lumo (or the new base styles) rather than between Aura and Lumo.