How to change Notification color text?

Flow
1

Hello to everyone,

I have added the next css to my .css file:

.v-Notification.mystyle {
background: #EFEFEF !important;
border: solid #002060;
border-radius: 10px !important;
color: #000000 !important;
}

in order to change the style of the Notification. Everything work but the color of the text does not!
Is anyone who has any idea why?

thanks

2

Hi,

that’s probably because the Notification text is not directly in the HTML element with the class v-Notification. You can see that the Notification description text is actually a couple of steps further in the element hierarchy if you inspect the element (see attached pic).

You can change the color of the text e.g. by using the CSS selector h1.v-Notification-caption in the .css file.

-Katri
17063704.png

3

Bro I am not able to change color using CSS selector[.]
(https://aquastech.in/best-water-purifier/). :frowning:

4

Please!

5

Here are at least three options:

Span red = new Span("I'm red!");
red.addClassName("red");
new Notification(red).open();

shared-styles.css

.red {
  color: var(--lumo-error-text-color);
}

Span blue = new Span("I'm blue!");
blue.getStyle().set("color", "var(--lumo-primary-text-color");
new Notification(blue).open();

Notification myNotification = new Notification("I'm green!");
myNotification.addThemeName("green");
myNotification.open();

Java

@CssImport(value = "./styles/notification-card.css", themeFor = "vaadin-notification-card")

notification-card.css

:host([theme="green"]
) {
  color: var(--lumo-success-text-color);
}

If you want to override the default color:

Java

@CssImport(value = "./styles/notification-card.css", themeFor = "vaadin-notification-card")

notification-card.css

:host {
  color: purple;
}