Define global css variable

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”))


     --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

protected void onAttach(AttachEvent 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 {
    public void serviceInit(ServiceInitEvent serviceInitEvent) {
        var color = ...;
        serviceInitEvent.getSource().addUIInitListener(e -> {
            e.getUI().getElement().getStyle().set("--lumo-primary-color", color);