Grid Styling Light vs Dark

Flow
1

Hi, on flow I have the following (custom) grid style at the shared-styles.html:

<dom-module id="my-grid-theme" theme-for="vaadin-grid">
  <template>
    <style>
    :host {
    	--_lumo-grid-selected-row-color: var(--lumo-primary-color-50pct);
    }
    
      /* Headers and footers */
      [part~="header-cell"]
 ::slotted(vaadin-grid-cell-content),
      [part~="footer-cell"]
 ::slotted(vaadin-grid-cell-content),
      [part~="reorder-ghost"]
 {
        font-size: var(--lumo-font-size-s);
        font-weight: 500;
        text-align: center;
      }
      
      
      [part~="header-cell"]
 {
        background-color: hsl(214,90%,90%);
      }
      
       [part~="row"]
:hover [part~="body-cell"]
{
           	color: red;
          	background-color : var(--lumo-primary-color-10pct);
       }
    </style>
  </template>
</dom-module>

So generally I have the header with different background color (hsl(214,90%,90%); When I switch to “Dark” theme I get the same Background Color (which is really unreadable in Dark mode).
How can I have different background colors for the [part~=“header-cell”]
when on light and when on dark mode?

Thanks!
Nick

2

Hi Nick,

You should be able to do the following:

shared-styles.html

<custom-style>
  <style>
    html {
      --grid-header-cell-background-color: hsl(214, 90%, 90%);
    }
    [theme~="dark"]
 {
      --grid-header-cell-background-color: ...;
    }
  </style>
</custom-style>

<dom-module id="my-grid-theme" theme-for="vaadin-grid">
  <template>
    <style>
      [part~="header-cell"]
 {
        background-color: var(--grid-header-cell-background-color);
      }
    </style>
  </template>
</dom-module>
3

Ooooohhh I see now how it works!!!
Nice approach and works like a charm!!!
Thanks!!

4

You’re welcome, glad it helped! :slight_smile: