Define global css variable

Hi,
we use a global variable to set the background image of our application. It is possible to modify the global variable via code on application startup (like in the AppShellConfigurator).

Currently we define the global variables in a CSS-file and import them in the AppShellConfigurator (@CssImport(value = “./styles/ProductVariables.css”))

CSS:

html{
     --v-color-maqsima-product: var(--v-color-maqsima-orange);
    --v-image-login-background: url("./tms_we/img/login-background-neu.png");
    --v-image-portal-background: url("./tms_we/img/portal-background-neu.png");
...    

Redefining e.g. on the UI.getElement() should do it:

Ok. This works if i access the UI in a view. I first look for a solution to change it on the AppShellConfigurator, but in this class i didn’t have any access to the UI (it is not present there).

In one project we do it in our MainLayout’s onAttach method

@Override
protected void onAttach(AttachEvent attachEvent) {
    super.onAttach(attachEvent);
    var color = ...;
    if (color != null) {
        UI.getCurrent().getElement().getStyle().set("--lumo-primary-color", color);
    }
}

I haven’t tried this, but you could also try it in your ServiceInitListener

public class ServiceInitListener implements VaadinServiceInitListener {
    @Override
    public void serviceInit(ServiceInitEvent serviceInitEvent) {
        var color = ...;
        serviceInitEvent.getSource().addUIInitListener(e -> {
            e.getUI().getElement().getStyle().set("--lumo-primary-color", color);
        });
    }
}