Search code examples
notificationsvaadinstylingvaadin-flow

How to style notifications in Vaadin Flow

I would like to style notifications in Vaadin Flow (19+), in Java, exactly as shown here in typescript, by assigning a theme and not setting the color of the elements (as shown in the java example). Apart the fact that setting the color is troublesome (foreground, background...) and fragile (e.g. switching to dark mode), the Java example shows setting a CSS color, I would expect to be allowed to use Lumo color variables (e.g. --lumo-success-color). Is this possible? Can anybody show an example?

Solution

  • You can use the addThemeVariants() method to define the variant you want to use:

    Notification notification = new Notification();
notification.addThemeVariants(NotificationVariant.LUMO_PRIMARY);

    The Java examples have not been moved over to the new docs site yet, you can find them here https://vaadin.com/components/vaadin-notification/java-examples/theme-variants