Load external stylesheet after lumo styles are loaded


I am trying to override the Lumo color values with an external css:


However it seems it is always loaded before lumo is loaded so the lumo defaults are overriding my values.

I am loading lumo like in the tutorials:
@JsModule(value = “./styles/shared-styles.js”)
shared-styles.js :

import ‘@vaadin/vaadin-lumo-styles/all-imports’;

The only way I found is to change the LoadMode for the override to lazy

UI.getCurrent().getPage().addStyleSheet(“http://localhost:8095/lumo-override.css”, LoadMode.LAZY);

however this way it is not so nice because it is visible at page load the the application switches color.

Any better idea?


There may be better solutions than mine, but I usually just use !important to override lumo color values.

Kaspar Scherrer:
There may be better solutions than mine, but I usually just use !important to override lumo color values.

Thanks, This also came to my mind as a a final solution but I hope there is a more elegant way.


You’ll just need to use a more specific CSS selector than what is defined in Lumo. You could, for example, add a custom CSS class name at the root of the UI and thus any variable overrides that acknowledge that custom class name will be stronger than the default Lumo styles.

Have you tried using the PageConfigurator?

I had the same problem, only in my case the .css was in a database/string, so what I did was the following:
I had at the LoginView implement the PageConfigurator and then

	public void configurePage(InitialPageSettings initialPageSettings) {
		String cssFromDB = dbGet().getCssForClientWithDomain(domain); //Dummy Code that returns the CSS
		initialPageSettings.addInlineWithContents(cssFromDB, WrapMode.STYLESHEET);

In my case I have the .css setup as a theme and when the UI is attached I

UI.getCurrent().getElement().setAttribute("theme", themeName);

so the lumo is left untouched and when the login page loads it shows the “theme”…