Vaadin Flow: How to add border to Dialog / Confirm Dialog?-CodePudding

I would like to add border and contrast to a Vaadin Dialog / ConfirmDialog.

Doing the following:

ConfirmDialog dlg = new ConfirmDialog();
dlg.addClassNames(LumoUtility.Border.ALL, LumoUtility.BorderColor.CONTRAST);

Unfortunately this adds the border to the canvas (basically the whole screen) rather than to the overlay which is the actual dialog.

Background: What I want to "correct" in the standard Lumo theme is that when using the Dark Theme there's too little of a contrast between the Dialog and its background, which makes it difficult to see where one begins and other other one ends.

Using Vaadin Flow v23.2.4.

Final solution

As per Vaadin's documentation the overlay cannot be styled using CSS class names and therefore cannot be styled using Java. In my case it is acceptable to have my new style apply to every ConfirmDialog that the application uses.

Following Jouni's answer, I did the following:

In the frontend/themes/my-theme/components folder I added a file named vaadin-confirm-dialog-overlay.css with content as follows:

/* Customize ConfirmDialog so that it has a border.
   If not, the dialog tends to blend in with the background
   in particular when using Dark theme.
 */
vaadin-confirm-dialog-overlay::part(overlay) {
    border: 1px solid;
    border-color: var(--lumo-contrast-50pct);
}

This did the trick for me.

CodePudding user response：

It sounds like you are perhaps applying the dark theme incorrectly, with <body theme="dark">, instead of <html theme="dark">.

When you set the attribute on the <html> element, there should be more contrast between the background and the dialog.

If that’s not the case, then you need to style the “overlay” part of the Dialog component.

vaadin-dialog-overlay::part(overlay) {
  border: 2px solid red;
}

See the documentation for some more info: https://vaadin.com/docs/latest/styling/getting-started/#styling.get-started.sub-component-styling