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("http://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.
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