> Markdown version of [Loading Stylesheets Dynamically](https://vaadin.com/docs/next/styling/advanced/dynamic-stylesheets). Section index: [llms.txt](https://vaadin.com/docs/next/styling/llms.txt)

# Loading Stylesheets Dynamically

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.

```java
/* Local style sheet served by the application */
/* Located in src/main/resources/META-INF/resources/dynamic-styles.css */
UI.getCurrentOrThrow().getPage().addStyleSheet("dynamic-styles.css");
/* Style sheet loaded from an external URL */
UI.getCurrentOrThrow().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.

```java
/* Add dynamic stylesheet */
Registration registration = UI.getCurrentOrThrow().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/`

```java
public 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.getCurrentOrThrow()),
                event.getValue()));
    }

    @Override
    protected void onAttach(AttachEvent attachEvent) {
        super.onAttach(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`