Documentation

Documentation versions (currently viewingVaadin 23)
Check out the new styling guides

Lumo Light and Dark Modes

Learn how to enable Lumo light and dark theme variants.

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

We often want to enable our application users to choose themselves between light and dark mode. For this, we cannot use the @Theme annotation, as it sets the variant permanently for the whole application.

Instead, we 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);
    }
}
  1. Get the list of currently applied theme variants.

  2. 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