Theming

The look is fully yours. The Dash component ships a themeable stylesheet driven by roughly thirty --tg-* CSS variables — colors, spacing, radius, fonts — so you switch a preset or override a single variable without forking CSS. The framework adapters are headless: they emit stable .tg-* class names and you own the CSS, ideally reusing the same variable convention.

from dash_tensor_grid import TensorGrid, build_grid

payload = build_grid(sales, {
    "rows": ["region", "country"],
    "measures": {"revenue": "sum", "qty": "sum"},
    "formats": {"revenue": "currency:USD", "qty": "number:0"},
})
TensorGrid(
    id="grid",
    row_data=payload["row_data"],
    column_defs=payload["column_defs"],
    theme="dark",  # 'light' | 'dark' | 'high-contrast'
    theme_overrides={"--tg-accent": "#7048e8", "--tg-radius": "12px"},
)

// Headless: render the grid inside a themed wrapper and style the .tg-* classes.
<div className="my-grid-theme">
  <TensorGrid data={data} rows={['region', 'country']} measures={{ revenue: 'sum', qty: 'sum' }} />
</div>;

<template>
  <div class="my-grid-theme">
    <TensorGrid :data="data" :rows="['region', 'country']" :measures="{ revenue: 'sum', qty: 'sum' }" />
  </div>
</template>

// Give the mount host your theme class, then style the .tg-* classes in your own CSS.
const host = document.getElementById('grid');
host.classList.add('my-grid-theme');
mountTensorGrid(host, { data, rows: ['region', 'country'], measures: { revenue: 'sum', qty: 'sum' } });

Theming variables

Override any of the --tg-* variables — in theme_overrides (Dash) or your own stylesheet (adapters). Common ones:

.my-grid-theme {
  --tg-bg: #ffffff;
  --tg-fg: #1a1b1e;
  --tg-muted: #868e96;
  --tg-border: #e9ecef;
  --tg-header-bg: #f8f9fa;
  --tg-header-fg: #495057;
  --tg-row-hover: #f1f3f5;
  --tg-row-selected: #e7f5ff;
  --tg-accent: #228be6;      /* selection, focus ring, links */
  --tg-pos: #2f9e44;         /* trend up / positive */
  --tg-neg: #e03131;         /* trend down / negative */
  --tg-radius: 8px;
  --tg-cell-pad-y: 8px;
  --tg-cell-pad-x: 12px;
  --tg-font-size: 13.5px;
}

/* Blend with the viewer's OS theme */
@media (prefers-color-scheme: dark) {
  .my-grid-theme {
    --tg-bg: #1a1b1e;
    --tg-fg: #c1c2c5;
    --tg-header-bg: #25262b;
    --tg-row-selected: #1c3a52;
    --tg-accent: #4dabf7;
  }
}

Notes

Presets. The Dash theme prop switches light / dark / high-contrast (a WCAG-AAA-ish palette with strong borders and a thick focus ring) by stamping data-theme on the root; theme_overrides layers per-variable tweaks inline on top.
Blend host tokens. The default variables fall back to common host design tokens where present, so the grid inherits your app’s palette before you override a thing.
Headless core. The adapters render semantic .tg-* classes (.tg-grid, .tg-cell-measure, .tg-pinned, .tg-sparkline, …) and no opinionated chrome — map them to your design system, or adopt the --tg-* convention above so one stylesheet themes every surface consistently.