CODEWITHSUNDEEP
javavaadinvaadin10
Leviand
Leviand

Reputation: 2805

Vaadin 10/Flow theming with Lumo

I'm having some trouble understanding Vaadin 10 theming: I've read all documentation on site but I can't solve my problem.

For example: if I start a plain Vaadin 8 application from scratch, when I stop the server I get a nice notification from disconnection:

enter image description here

But with a new Vaadin 10 starter (project base), i get this ugly notification enter image description here

Both application are standard without any edit from Vaadin starters. I've tried playing with shared-styles.html but without success.

My questions, all vaadin 10 related:

  1. Is Lumo theme with this look by default, or it looks this way because I'm missing some imports or settings?
  2. How can I apply the "dark" style for Lumo theme (i mean the whole application)?
  3. How and where can I apply a global style variable, like for example a different primary color or a background color?

Thanks

Upvotes: 1

Views: 1654

Answers (1)

Alejandro Duarte
Alejandro Duarte

Reputation: 1479

  1. It's the default look.
  2. Mark your router components with @Theme(value = Lumo.class, variant = Lumo.DARK).
  3. You can use Lumo's CSS custom properties in a CSS rule in the styles file. For example: html{--lumo-base-color: aliceblue;}.

Example use of the @Theme annotation on the usual MainView class:

@Route ( "" )
@Theme ( value = Lumo.class, variant = Lumo.DARK )  // ⬅ Add annotation 
public class MainView extends VerticalLayout { … }

And here's how you can customize the disconnection notification:

<custom-style>
  <style>
    html {
      --lumo-base-color: aliceblue;
    }

    .v-reconnect-dialog {
      visibility: visible;
      border: 1px solid lightslategray;
      background-color: slategray;
      color: lightgray;
      box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, .4);
      border-radius: 4px;
    }

    .custom {
      color: lightskyblue;
    }
  </style>
</custom-style>

Upvotes: 8

Related Questions