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)) {
                        themeList.remove(Lumo.DARK);
                    }else {
                        themeList.add(Lumo.DARK);
                    }

                })
                .text("Change theme")


                .build();

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.