Set default background color

Flow
1

What I want to do is set the background color in the browsers main window and set the background color for all panels and layouts to TRANSPARENT, that the the color of the main window shows through. I also do not want to effect the color of the controls on the screen. The problem is that I can not figure out the CSS to make that happen.

Thank you
Freddy

2

You need to set the v-app element as transparent. If using Valo, you can do that with:

$v-app-background-color: rgba(255,255,255,0.0);

Note that while the backgrcolor is transparent, Valo uses the RGB components to determine other component colors. Using keyword “transparent” would result in Sass compilation failure.

If not using Valo, you can define it with a regular CSS rule for the v-app element. Just note that the element is the same one as the one with the theme name. You may need to add some specificity to the rule, for example by including the theme name or some outer element.

In styles.scss:

.mytheme {
    @include addons;
    @include mytheme;
}

body {
    background: purple; /* This will show through */
}

.mytheme.v-app {
    background-color: transparent;
}

You could probably do that with the Sass parent selector as well.

Note that some inner components may have non-transparent colors as well.

3

I’m looking simialr solution - a default background but all components should have white background. Something like this

image
image2547×1527 96.9 KB

1 → default background
2 → white background

I tried this body { background-color: var(--bs-gray-200); }

and the result is

image
image3056×1066 142 KB

Most of the components inheriting the default background color which I do want to. How do I set this now ?

4

You probably want to set --lumo-base-color value to something

You can find all the CSS custom properties for colors used in modern Vaadin here

I recommend to browse throw the entire Lumo documentation.

5

That is also producing the same result. I looked into this vaadin business app business-app-starter-flow/src/main/frontend/styles/styles.css at v24 · vaadin/business-app-starter-flow · GitHub as well and found that it is using .root { background-color: var(--lumo-contrast-5pct); } but this also doesn’t work.