Docs

Docs

Loading Stylesheets Dynamically in Flow

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 styles, 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 to an external URL.

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

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

Note

Dynamically loaded style sheets should not be in theme folder. Stylesheets placed in the application theme folder are bundled together during the build process, and thus cannot be relied on to be available as statically served resources at run-time. The resource folder at src/main/resources/META-INF/resources is the recommended location for these.

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