How to switch Lumo themes dynamically?

I thought it is hard to change the themes on the fly but after looking into a sample, there is a simplest way to achieve that. So, here is the code which changes from Dark mode to Light and vice versa.

Button changeTheme = Components.button()
                .onClick(event -> {
                    ThemeList themeList = UI.getCurrent().getElement().getThemeList();

                    if (themeList.contains(Lumo.DARK)) {
                    }else {

                .text("Change theme")


And screenprints are

If you want to switch just a single component/layout, again that is also so simple. All you need is, that component’s element -> themelist like

ThemeList themeList = formLayout.getElement().getThemeList();

and it will look like

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.