Load external stylesheet after lumo styles are loaded

Flow
1

Hi,

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

UI.getCurrent().getPage().addStyleSheet(“http://localhost:8095/lumo-override.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?

Thanks
Erik

2

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

3

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.

Thanks,
Erik

4

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.

5

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

@Override
	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”…