How to enable Lumo colour styling in Spring Boot

Flow
1

Hello everyone!
I’m new to Vaading but already consider this project quite awesome.
However, I’ve met a problem when tried to customize component style:

I’ve got a very simple view provided via Spring Boot with 2 spans and 2 button and I want them to have “error” style like described there: https://cdn.vaadin.com/vaadin-lumo-styles/1.0.0/demo/colors.html.

Somewhy, the result is not as expected.

  1. What am I missing? The are some errors with several resources but nothing I tried fixed that.
  2. The button with “error” theme works fine, no idea why. Is there a complete list of themes and components they could be applied to?

Result: https://i.imgur.com/2SFNjZ1.png

Code: https://i.imgur.com/o5ukhdk.png

2
  1. What am I missing? The are some errors with several resources but nothing I tried fixed that.

Hard to say what goes wrong. What URLs are not loaded correctly?

  1. The button with “error” theme works fine, no idea why. Is there a complete list of themes and components they could be applied to?

That works as expected. The first button is using theme=error which is a built-in theme variant. The other button is using a custom class=error and it won’t change the button outlook if you don’t specify your own CSS for that class name.

For built-in theme variants, check the component documentation on the website. For example, you’ll find the button variants here: https://vaadin.com/components/vaadin-button/html-examples/button-lumo-theme-demos