c8y-dashboard-gridstack:not([name]):not([use-context])>.dashboard-theme-white,
body .dashboard-preview-slot.panel-content-white,
.dashboard-preview-slot.dashboard-theme-white,
c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-white,
.c8y-grid-dashboard c8y-dashboard-child .panel-content-white {
  .c8y-light-theme();

}

.dashboard-preview-slot.dashboard-theme-white {
  background: white !important;
}

.dashboard-preview-slot.dashboard-theme-light {
  --c8y-dashboard-background: var(--body-background-color, var(--c8y-body-background-color));
  background:var(--c8y-dashboard-background);

}

c8y-dashboard-gridstack:not([name]):not([use-context])>.dashboard-theme-white,
c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-white {
  --c8y-dashboard-background: var(--c8y-palette-high);
  background-color: var(--c8y-dashboard-background);
}

c8y-dashboard-gridstack:not([name]):not([use-context])>.dashboard-theme-light,
c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-light {
  --c8y-dashboard-background: var(--body-background-color, var(--c8y-body-background-color)) ;

  .c8y-dark-theme & {
    --c8y-dashboard-background: var(--c8y-palette-low);
  }

  // TODO: Uncomment when the dark theme is available
  // @media(prefers-color-scheme: dark) {
  //   --c8y-dashboard-background: var(--c8y-palette-low);
  // }
}
