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:

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:

Thanks

1 Answer
1

@Theme(value = Lumo.class, variant = Lumo.DARK)

html{--lumo-base-color: aliceblue;}

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>


shared-style.tml

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.