Vaadin Grid Drag&Drop change drop target highlighting color

Question

I need to change the color of the highlighting of possible drop targets in a Vaadin 14 Grid. To illustrate, I am using the drop mode "between", which results in a purple line:

How do I change the color of that purple line?

Vaadin Tutorials are not easy to understand and suggest using a CSS selector ending with -drag-center (Vaadin 8) or using .v-drag-over-target.card selector. But this does not seem to work, maybe I need to replace "v" in the second suggestion with something else?

Answer 1

Due to the purple color I'm assuming that you are using the Material theme. I'll also assume that you have a custom theme set up, as is described here. If not, that page explains how to set up a custom theme.

To customize the color of the grid row drag indicator:

• In your project folder, create a file frontend/themes/<your-custom-theme-name>/components/vaadin-grid.css
• Add the following contents to the CSS file:

[part~='row'][dragover] [part~='cell']::after {
    background: green; /* replace with the color you want */
}