how to set the Material theme's custom properties?

Flow
1

Is there a way to set the Material theme’s custom properties? See link for list of properties.

https://cdn.vaadin.com/vaadin-material-styles/1.2.3/demo/colors.html#custom-properties

I only have experience using the Java Vaadin API. Do not even know where I would add HTML/CSS file to my project to alter stuff. So if the way to do it is only via HTML/CSS code, then where would such files go?

More detail. I switch from Lumo to Material and noticed that the Notifications all turned to black background and I cannot find a way to set it back to green (success) / red (error) like in Lumo theme variants. I noticed that the background color of the Notification is controled via the following:

--material-background-color: var(--dark-theme-background-color, #303030);

I imagine I would either need to change the Notification object to not use --material-background-color, or change the value of --material-background-color or change the value of --dark-theme-background-color.

thanks in advance.

2

Check this documentation page: https://vaadin.com/docs/v14/flow/theme/theming-crash-course.html, especially the part Using Custom CSS Properties, that should have some related info. Since Notifications are Overlays, you might also want to look into this: https://vaadin.com/docs/v14/flow/theme/tutorial-theming-overlay.html. Long story short, typically you want to set custom properties on the html element in your .css file. Whether you want to override --material-background-color or just the color used by Notifications depends if you want to affect all other usages of --material-background-color or not - if you do, just overriding the custom property on html level should be the way to go. Otherwise, you’ll need to target Notifications only, and there you’ll need a theme module for the [part~="overlay"] as documented on the Theming Overlay Components page.

3

Olli,

Thank you for the answer. I tried all three methods outlined in the first link you sent. Unfortunately none of them worked. I do not know what I am doign wrong. I created this file

file path:

resources/static/frontend/styles/shared-styles.css

contents:

html {
    --dark-theme-background-color: #1B4D3E;
}

body {
    --material-background-color: #1B4D3E;
}

In my route class where the Notification is being used, I added the following annotation:

@CssImport("./styles/shared-styles.css")

This had no effect. And Developer Tools on Chrome did not show my fields and values from my css file. Did I do something wrong?

For the second approach in that first link, I tried doing all that by but I guess I couldn’t follow the short instructions. I suspect the instructions assume certain things are known by the reader.

I also tried following the directions from the second link.

file path:

resources/static/frontend/styles/my-overlay-theme.css

contents:

:host([theme~="custom-theme-variant"]
) [part~="overlay"]

{
    --dark-theme-background-color: #1B4D3E;
    --material-background-color: #1B4D3E;
}

annotations:

@CssImport(value = "./styles/my-overlay-theme.css",
        themeFor = "vaadin-*-overlay")

set the theme on the Notification:

            notification.getElement().setAttribute("theme",
                    "custom-theme-variant");

This also had no effect. Am I putting my CSS files in the wrong directory in my project?

4

Yes resources/static/frontend/ doesn’t sound right. You should look at this StackOverflow post that explains where things should go, depending on your project configuration: https://stackoverflow.com/questions/57553973/where-should-i-place-my-vaadin-10-static-files/57553974#57553974

5

Olli,

Thank you so much! That SO answer worked. Thank you for taking to time to respond to my question.

6

No problem!

7

J - can you share some of the steps you did to get this completed? I’m following along and still can’t seem to override the background color of the notification container.

8

Jeff Bursik:
J - can you share some of the steps you did to get this completed? I’m following along and still can’t seem to override the background color of the notification container.

Hey Jeff,

Are you using V14? Lumo or Material? Sprint Boot or plain Java?