Component Styling

why do all Vaadin elements have opacity != 1? how can this be fixed for all elements (I want to place elements on the background image, but they look very unpresentable) it is very difficult to search for 100 styles selectors for each component and change them for each, is there any small setting to change this behavior?

Pseudo code:

var wrapper = new Div();
wrapper.add(your components); 
wrapper.addClassname("your class name with a background property");

this will not help, you can check it yourself, all vaadin components are set to transparency by default

That’s why I said add them to a component with proper styling.

and result:
and for it to work correctly I have to apply 100 style selectors in the CSS file for everything to look normal, I showed that your method does not work

You are missing a background property.


I’m telling you, vaadin components have transparency as a standard, which is difficult to remove

please don’t answer if you haven’t encountered this, thanks

The transparency effect originates from the shade color variables having transparency. You can try changing the values to non-transparent to make the elements visible against background images.

These values will will fix your form, but might introduce styling issues in parts where transparency is expected (i.e. shadows)

html {
    --lumo-shade-5pct: hsl(0 0% 95%);
    --lumo-shade-10pct: hsl(214, 0%, 90%);
    --lumo-shade-20pct: hsl(214, 0%, 80%);
    --lumo-shade-30pct: hsl(214, 0%, 70%);
    --lumo-shade-40pct: hsl(214, 0%, 60%);
    --lumo-shade-50pct: hsl(214, 0%, 50%);
    --lumo-shade-60pct: hsl(214, 0%, 40%);
    --lumo-shade-70pct: hsl(214, 0%, 30%);
    --lumo-shade-80pct: hsl(214, 0%, 20%);
    --lumo-shade-90pct: hsl(214, 0%, 10%);
    --lumo-shade: hsl(214, 0%, 0%);
1 Like

It can be made safer by scoping these styles to only some parts of the UI.

.has-background-image {
    --lumo-shade-5pct: hsl(0 0% 95%);

I solved the problem a long time ago in approximately this way: I went to figma → vaadin and copied all the colors (it turned out to be exactly the same color only without transparency)

thanks, but for my small application it is possible in an html tag