How to style the Vaadin 10 HelloWorld

Flow
1

I just wonder how I could get the valo styles into a Vaadin 10 HelloWorld app with a Button and a Label?
Any hint would be appreciated.

Regards Thomas

2

Hi, Vaadin 10’s default theme is now called Lumo. You can define the theme with the @Theme annotation on an element as described in the docs
https://vaadin.com/docs/v10/flow/theme/tutorial-built-in-themes.html

3

Adam Wagner:
Hi, Vaadin 10’s default theme is now called Lumo. You can define the theme with the @Theme annotation on an element as described in the docs https://vaadin.com/docs/v10/flow/theme/tutorial-built-in-themes.html

What if I want to customize Lumo. How do I make, for example, one layout slightly darker than the other?

4

How do I make, for example, one layout slightly darker than the other?

Java

Div d1 = new Div();
d1.addClassName("slightly-darker");

CSS

.slightly-darker {
  background-color: var(--lumo-contrast-5pct);
}

You can also set it directly via Flow’s API.

Div d1 = new Div();
d1.getStyle().set("background-color", "var(--lumo-contrast-5pct)");

You can find Lumo’s colors here: https://cdn.vaadin.com/vaadin-lumo-styles/1.2.0/demo/colors.html.