Switching Color Scheme

Aura and Lumo each provide light and dark color schemes. You can select a default color scheme and switch it at runtime without changing the application theme.

Color Scheme Options

Both themes support the following options:

  • Light – always uses the light color scheme.

  • Dark – always uses the dark color scheme.

  • System – follows the operating system or browser setting.

Setting the Application Default

By default, the application uses the light color scheme. Use the @ColorScheme annotation on the main application class to select another option:

import com.vaadin.flow.component.page.AppShellConfigurator;
import com.vaadin.flow.component.page.ColorScheme;

@ColorScheme(ColorScheme.Value.LIGHT_DARK)
public class MyProjectApplication implements AppShellConfigurator {
    // ...
}

Use the following ColorScheme.Value values for light and dark color schemes:

  • LIGHT always uses the light color scheme.

  • DARK always uses the dark color scheme.

  • LIGHT_DARK follows the operating system or browser setting and falls back to light.

  • DARK_LIGHT follows the operating system or browser setting and falls back to dark.

Changing the Current UI

Use Page.setColorScheme() to change the color scheme of the current UI at runtime:

import com.vaadin.flow.component.UI;
import com.vaadin.flow.component.page.ColorScheme;

UI.getCurrentOrThrow().getPage()
        .setColorScheme(ColorScheme.Value.DARK);
Page.setColorScheme() does not save the selection. Store the value separately if it must be restored in a later session.

Saving a User Preference

Jmix provides ThemeUtils for saving the color scheme in browser local storage and applying it to the current UI. First, import the Jmix color scheme support script in the main application class:

@JsModule("./src/theme/color-scheme-switching-support.js")

Then call one of the following methods:

import io.jmix.flowui.kit.theme.ThemeUtils;

ThemeUtils.applyLightTheme();
ThemeUtils.applyDarkTheme();
ThemeUtils.applySystemTheme();

The system option follows the operating system or browser setting. The userMenu_themeSwitch action provides the same three options in a user menu.

Use either the Jmix ThemeUtils mechanism or your own code based on Page.setColorScheme() for the same setting. Using both can produce conflicting results.

Writing Color-Scheme-Aware CSS

Use the CSS light-dark() function to define a value for both color schemes:

html {
    --vaadin-text-color: light-dark(#202124, #f5f5f5);
}

Aura

Aura provides separate -light and -dark source properties. Define both properties to customize a color for both schemes:

html {
    --aura-accent-color-light: blue;
    --aura-accent-color-dark: lightskyblue;
}

Lumo

For Lumo, assign light-dark() directly to a theme property:

html {
    --lumo-primary-color: light-dark(blue, lightskyblue);
}