Switching between Dark and Light Lumo

Flow
1

Hi!
I’m trying to switch the theme of my application (Vaadin 10) from Java code (Lumo Light - Lumo Dark and vice versa). As I failed to do that, I’ll appreciate your help!

Best!

2

Hi Kata,

If you wish to change the theme for the entire application, you can call getElement().setAttribute("theme", "dark") on the application’s main layout.

3

Perfect! Thank you!

4

Apparently you can also do this:
@Theme(value = Lumo.class, variant = Lumo.DARK)

Source:
https://vaadin.com/docs/v10/flow/theme/using-component-themes.html

5

At least on my bakery based Vaadin 13 app, right way was to define this method into your AbstractAppRouterLayout extending class:

protected void beforeNavigate(String route, HasElement content) {
	super.beforeNavigate(route, content);
	UI.getCurrent().getElement().setAttribute("theme", Lumo.LIGHT);
}

As theme attribute was at body element, not at “mainview” element. Not sure why it was there on my app. Maybe annotations cause it to be injected to body?

Anyway, this might help if previous tricks won’t work.