I can't find documentation on how to change styles. For example, how to cha

Directory Vaadin Login
1

I can’t find documentation on how to change styles. For example, how to change the background color of LoginOverlay brand section.
can someone help me ? thanks

2

I tried it with a css class vaadin-login-overlay-wrapper::part(content), but it seems that i have to create a style module according to the docu (https://vaadin.com/docs/v14/flow/theme/tutorial-theming-overlay.html).

EDIT: my css class works, but only if i logged out again.

3

for anyone else googling:
in .css file:

:host([theme~="custom-theme-variant"]
) [part="form"]
 {
    background-color: darkred;
}

and in the corresponding java file:

@CssImport(value = "./styles/login-styles.css", themeFor = "vaadin-*-form*")

Don’t forget to set the attribute on the login form itself within your java class:

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

This is only an example (not sure if it’s the “right” way to do things but for all those searching for an answer…

4

I did it the same way.
Make sure that the css file is in the “projectname/frontend/” folder.
I found the right vaadin theme name (like vaadin-*-from) and the part name (like part=“content”) via DevTools in Chrome.

Here my written code to change the color of the background behind the login window (called “vaadin-login-overlay-wrapper”).

I’m using Vaadin 14.1.5.
Watch out if you created the project in Vaadin 13, some implementations may didn’t work in compatibility mode!

CSS file - frontend/styles/my-overlay-theme.css

:host([theme~="login-theme"]
) [part="content"]
 {
    background: radial-gradient(circle, rgba(0,51,117,0.22) 0%, rgba(0,51,17,0) 70%);
}

In Java

@CssImport(value = "./styles/my-overlay-theme.css", themeFor = "vaadin-login-overlay-wrapper", include = "")
class LoginView extends LoginOverlay {
	LoginView() {
		getElement().setAttribute("theme", "login-theme");
	}
}

My earlier mentioned method with a css class in a global css file is not the way to go.

5

Thank you very much for the quick response! In case anyone else is struggling to style individual elements as well, these selectors worked for me (not particularly nice to have it this way but it gets the job done). These are in addition to the one I mentioned above and and require you to import the css into the java class as-is, no need for “themeFor” etc. (global css styling from the outside instead of for that particular component only).

In your java class:

@CssImport(value = "./styles/login-styles.css")

in login-styles.css:

/* login button */
[part="vaadin-login-native-form"]
 vaadin-button[part="vaadin-login-submit"]
 {
    background: lightgrey;
    color: black;
}
/* username field */
[part="vaadin-login-native-form"]
 vaadin-text-field::part(input-field) {
    background: white;
}
/* label above username */
[part="vaadin-login-native-form"]
 vaadin-text-field::part(label) {
    color: white;
}
/* password field */
[part="vaadin-login-native-form"]
 vaadin-password-field::part(input-field) {
    background: white;
}
/* label above password field*/
[part="vaadin-login-native-form"]
 vaadin-password-field::part(label) {
    color: white;
}

However: This seems to have no effect in IE11/Edge (the current version, not the one with the chromium engine). Does anyone have an idea on how to style these components of the login form that would work on IE11/Edge as well?
For reference: I am using vaadin 14.1.25…