Dark Variant

I already set the dark variant by default on a appshellconfigurator java file. However, I cannot switch the theme from dark to light using a button and themelist. Please help.

Here’s one way in the docs: https://vaadin.com/docs/latest/styling/lumo/lumo-variants/#light-and-dark-variants

@useful-whale when it’s on dark variant by default as set on appshellconfig file. When I use the dynamic option/toggle. It can’t be switched to light mode? Why? Thank you sir. I am not very good with vaadin.

Yes, you need to set the dark variant as default programmatically, with UI.getCurrent().getElement().getThemeList().add(Lumo.DARK);

OR you could use a different approach for setting and removing the Lumo.DARK attribute:

for setting it:
UI.getCurrent().getPage().executeJs("document.documentElement.setAttribute('theme', '"+Lumo.DARK+"')");
for removing it (i.e. switching to Light mode):
UI.getCurrent().getPage().executeJs("document.documentElement.removeAttribute('theme');