How to adjust theme variants?

Flow
1

Is there an easy way to adjust theme variants?

I’d like my Grids to have a background-color in the header, and then have striped rows starting with no background-color. When using GridVariant.LUMO_ROW_STRIPES it’s the other way around.

2 
[part~='header-cell'] {
  background-color: ...;
}

:host([theme~='row-stripes']) [part~='even-row'] [part~='body-cell'],
:host([theme~='row-stripes']) [part~='even-row'] [part~='details-cell'] {
  background-color: var(--vaadin-grid-cell-background, var(--lumo-base-color));
}

:host([theme~='row-stripes']) [part~='odd-row'] [part~='body-cell'],
:host([theme~='row-stripes']) [part~='odd-row'] [part~='details-cell'] {
  background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
  background-repeat: repeat-x;
}
3

Thanks, but this doesn’t seem to have any effect. Is there more to do than to put this in my styles.css?
It works if I use e. g. vaadin-grid::part(even-row-cell), but this is always applied, unrelated to the theme variant.

4

Those css lines should be in /themes/your-name/components/vaadin-grid.css

2 Likes
5

Right, if you want to use Light DOM, you can do:

vaadin-grid::part(header-cell) {
    background-color: ...;
}

vaadin-grid[theme~='row-stripes']::part(even-row-cell) {
    background-color: ...;
}

vaadin-grid[theme~='row-stripes']::part(odd-row-cell) {
    background-color: ...;
}
1 Like
6

Thanks to both of you, very helpful!