Lumo Light and Dark Modes
Lumo light and dark mode variants can be used to quickly customize all components in your application. By default, Lumo uses the light theme.
This guide describes the three main approaches to applying Lumo light and dark mode variants:
-
Enable the dark mode permanently for the whole application.
-
Dynamically enable the light and dark modes, which is commonly used to allow end users to toggle between the light and dark modes.
-
Enable the light or dark mode to specific components in your application.
Enable Dark Mode Permanently
To enable the dark mode permanently for the whole application, use the @Theme
annotation, specifying the variant
parameter to Lumo.DARK
.
@Theme(variant = Lumo.DARK)
Dynamically Enable Light and Dark Mode
Users often want to switch between light and dark themes when using an application.
You can’t use the @Theme
annotation for this, as it sets the variant permanently for the whole application.
Instead, you can use the ThemeList
object of the UI to enable the user to choose between light and dark mode.
This approach is demonstrated in the following view:
@Route("")
public class MainView extends VerticalLayout {
public MainView() {
H1 h1 = new H1("Hello darkness");
Button toggleButton = new Button("Toggle dark theme", click -> {
ThemeList themeList = UI.getCurrent().getElement().getThemeList(); 1
if (themeList.contains(Lumo.DARK)) { 2
themeList.remove(Lumo.DARK);
} else {
themeList.add(Lumo.DARK);
}
});
add(toggleButton, h1);
}
}
-
Get the list of currently applied theme variants.
-
Toggle between the light and dark themes.
Apply Light and Dark Mode to Specific Components
Using the @Theme
annotation enables the dark mode for all components in your application.
You can also apply the light or dark mode to individual components using the Elements API as in the following example:
TextField darkTextField = new TextField();
darkTextField.getElement().setAttribute("theme", Lumo.DARK);
BC958893-8EC0-419D-B743-B04393AF9F3B