Two different color schemes for grids including arrows & text when sorting

[mikael.fiil]

Yet another styling question - it’s somehow the thing I keep stumbling over.

I have two Gridpro grids, one inside the other, and I want to keep the header colors, including arrows, completely separate also during sorting:

I’ve set a class and theme on the inner grid:

taskNotificationGrid.addThemeName(“viavea-subgrid-generator”);
taskNotificationGrid.addClassName(“viavea-subgrid-generator”);

and Copilot suggested this:

taskNotificationGrid.getElement().getStyle().set(“–vaadin-grid-sorter-icons”, “white”);

My CSS looks like this, one of many experiments, but the only part that works it seem, is the first

.viavea-subgrid-generator::part(header-cell) {
background: #0f728f;
color: #ffffff;
}
.viavea-subgrid-generator::part(indicators) {
color: #ffffff !important;
}

:host([theme~=“viavea-subgrid-generator”])
[part~=“header-cell”] {
color: white !important;
}
,
:host([theme~=“viavea-subgrid-generator”])
[part~=“indicators”] {
color: white !important;
}

But once i sort the inner grid by clicking the header, it goes back to default colors until it is back to no sorting.

[Stefan.27 (Stefan Uebe)]

This should do the trick (with inner/outer as the respective grid’s class names):

/*text*/
.outer vaadin-grid-sorter::part(content), 
/*sorter*/
.outer vaadin-grid-sorter::part(indicators)::before  {
    color: green;
}

.inner vaadin-grid-sorter::part(content),
.inner vaadin-grid-sorter::part(indicators)::before {
    color: red;
}

[mikael.fiil]

Thanks, works perfectly!