Overriding Lumo properties in Vaadin 14 npm

Flow
1

Hello everyone,

I’m trying to override some of the Lumo colors with my own. Unfortunately, this does not seem to work.

My frontend/styles/lumo.css:

[theme~="dark"]
 {
    --lumo-base-color: #242424;
    --lumo-primary-text-color: rgb(170, 3, 43);
    --lumo-primary-color-50pct: rgba(170, 3, 43, 0.5);
    --lumo-primary-color-10pct: rgba(170, 3, 43, 0.1);
    --lumo-primary-color: rgb(170, 3, 43);
    --lumo-shade-5pct: rgba(75, 75, 75, 0.05);
    --lumo-shade-10pct: rgba(75, 75, 75, 0.1);
    --lumo-shade-20pct: rgba(75, 75, 75, 0.2);
    --lumo-shade-30pct: rgba(75, 75, 75, 0.3);
    --lumo-shade-40pct: rgba(75, 75, 75, 0.4);
    --lumo-shade-50pct: rgba(75, 75, 75, 0.5);
    --lumo-shade-60pct: rgba(75, 75, 75, 0.6);
    --lumo-shade-70pct: rgba(75, 75, 75, 0.7);
    --lumo-shade-80pct: rgba(75, 75, 75, 0.8);
    --lumo-shade-90pct: rgba(75, 75, 75, 0.9);
    --lumo-shade: #4B4B4B;
}

My MainLayout:

@CssImport("./styles/lumo.css")
@CssImport("./styles/shared-styles.css")
@Theme(value = Lumo.class, variant = Lumo.DARK)
public class MainLayout extends FlexLayout implements RouterLayout, PageConfigurator {

    public MainLayout() {
        setSizeFull();
        setClassName("main-layout");
    }

    @Override
    public void configurePage(InitialPageSettings settings) {
        settings.addLink("shortcut icon", "./icons/favicon.ico");
        settings.addFavIcon("icon", "./icons/favicon.ico", "192x192");
    }
}

The CSS properties from shared-styles.css get applied, but the changed theme colors are not. Can anybody give me a hint as to what is going wrong here?

2

Nevermind, this actually works. The reason was that the CSS changes to the pre-existing shared-styles.css have been refelected without a Maven build, whilst I needed to build everything again to use the new CSS file.

3

Could you please share your css file shared-styles.css ?

4

There isn’t much in it, but sure:

.main-layout {
    flex-direction: row;
}

.footer {
    background: var(--lumo-shade);
}

.profile-form {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    overflow: auto;
	background: var(--lumo-base-color);
    border-left: 1px solid;
	border-color: var(--lumo-primary-color);
}

.insufficient-rights-layout {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 25%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}


.insufficient-rights-label {
    font-size: 24px;
}