Issues with css and themes

Following styling documentation I do not get the same result

I have been experimenting with custom css and styles and for some reason I cannot change button color

Button2 is just using set css command, and button3 is using actual css file

For some reason I can change font from css but I cannot change the color

Also another question when I put variant = Lumo.DARK in Theme my theme stays light

I presume you’re trying to change the text color of Button 2? And that you are referring to the example on this page of docs https://vaadin.com/docs/latest/styling/#customizing-style-properties

If so, the difference is that the example in the docs is a primary button, while your button is a secondary (or default) button. Notice how, in the example, the button is blue before applying the css? Your button is light gray. Not the same button.

The secondary/default button does not use --lumo-primary-color for anything. It uses a slightly darker --lumo-primary-text-color for the text.

The light gray background color is --lumo-contrast-5pct

Also note that you can do the same thing in css as you do in Java: simply set the background-color property:

  background-color: green;
}```

Aha, that makes a lot of sense, I should have seen that. Thank you!

Do you maybe also know why buttons stay in light theme even after I set @Theme(variant = Lumo.DARK)

I do that in class that implements appshell… same as in picture

Hmm, that should work as far as I know. I’ll check with the Flow team tomorrow and get back to you.

Can you check if this workaround works?

UI.getCurrent().getPage().executeJs("document.documentElement.setAttribute('theme', '"+Lumo.DARK+"')");

Yes that works just fine

ok, then there seems to be an issue in the themeFolder + themeVariant combination of the @Theme annotation. Good catch!

In case you need it

oh wait even that overload isn’t working.

What about @Theme(themeClass = Lumo.class, variant = Lumo.DARK) ?

That doesn’t work too, I checked also in multiple browsers just to make sure

Huh, that’s interesting. And you’re on V24 right?