Loading Stylesheets Dynamically

Explains how dynamically to load stylesheets.

Stylesheets can be loaded dynamically based on application logic on the server side. This can be useful, for example, to load styles based on the current user, or to allow the user to switch between different themes, manually.

This is done using the addStyleSheet method on the Page class, which takes a URL parameter. The URL can point either to a stylesheet served by the application itself, located in the resource folder src/main/resources/META-INF/resources (or in src/main/webapp for non-Spring apps packaged as WARs), or to an external URL.

Source code

Java/* Local style sheet served by the application */
/* Located in src/main/resources/META-INF/resources/dynamic-styles.css */
UI.getCurrent().getPage().addStyleSheet("dynamic-styles.css");
/* Style sheet loaded from an external URL */
UI.getCurrent().getPage().addStyleSheet("https://example.com/styles.css");

Files loaded this way are applied to the entire UI in the current session, and remain applied until the end of the session.

Dynamic stylesheets can be removed using the Registration instance returned by the addStyleSheet method.

Source code

Java/* Add dynamic stylesheet */
Registration registration = UI.getCurrent().getPage().addStyleSheet("dynamic-styles.css");
/* Remove dynamic stylesheet when it is not needed anymore */
registration.remove();

Using the dynamic loading and the registration it is possible to have swappable style functionality.

This can be used, for example, in a StyleChanger component to update the current style based on the user’s selection.

Sample code defines the styles default, color vision deficiency and compact, for which the actual style files would be located in src/main/resources/META-INF/resources/

Source code

Javapublic class ThemeChanger extends Select<String> {
    public ThemeChanger() {
        setLabel("Select Theme");
        setItems("default-style.css", "cvd-style.css", "compact-style.css");
        setValue("default-style.css");

        addValueChangeListener(event -> switchTheme(
                event.getSource().getUI().orElse(UI.getCurrent()),
                event.getValue()));
    }

    @Override
    protected void onAttach(AttachEvent attachEvent) {
        UI ui = attachEvent.getUI();
        Registration registration = ComponentUtil.getData(ui,
                Registration.class);
        // set default-style if no registration found
        if (registration != null) {
            switchTheme(ui, "default-style.css");
        }
    }

    /**
     * Switch the current theme style sheet for a new one.
     *
     * @param ui         the ui in use, not {@code null}
     * @param styleSheet new style to replace current with
     */
    protected void switchTheme(UI ui, String styleSheet) {
        // Get previous style registration
        Registration registration = ComponentUtil.getData(ui,
                Registration.class);
        // If previous available remove style sheet
        if (registration != null) {
            registration.remove();
        }

        // Add the new style sheet
        registration = ui.getPage().addStyleSheet(styleSheet);

        // Store registration to remove style on later change
        ComponentUtil.setData(ui, Registration.class, registration);
    }
}

6c72d9f9-16d5-4ab5-add8-3c481c3103f8

Docs

Docs

Loading Stylesheets Dynamically