Vaadin 10/Flow theming with Lumo
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>
Right. No need to import anything from the
shared-style.tml
file.– Alejandro Duarte
Jul 3 at 13:27
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.
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 3 at 13:19