Vaadin 10/Flow theming with Lumo

Question

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:

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

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:

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

Thanks

score 7 · Accepted Answer · edited Nov 15 '18 at 00:15

7

It's the default look.
Mark your router components with @Theme(value = Lumo.class, variant = Lumo.DARK).
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>

edited Nov 15 '18 at 00:15

Basil Bourque

303,325
100
852
1,154

answered Jul 03 '18 at 13:09

Alejandro Duarte

1,365
8
15

It worked perfectly, thanks so much! In this case I don't have to import anything into _shared-style.html_ because I'm using Lumo, and it's all packed into Vaadin, right? – Leviand Jul 03 '18 at 13:19
1

Right. No need to import anything from the `shared-style.tml` file. – Alejandro Duarte Jul 03 '18 at 13:27
FYI, apparently another option is setting any component/layout by code: `someWidget.getElement().setAttribute( "theme" , "dark" );` – Basil Bourque Dec 18 '18 at 00:49
please provide examples where to save the custom styles file and how to import it. – d2k2 Sep 12 '19 at 15:02

Vaadin 10/Flow theming with Lumo

1 Answers1