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

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?