Documentation

You are viewing documentation for Vaadin 23. View latest documentation

Documentation

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

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);
    }
}

  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