Theming
The data table is style-agnostic. It is built entirely on standard shadcn/ui primitive APIs, and those primitives are declared as registry dependencies. When you run shadcn add, the CLI installs those primitives in your configured style (Sera, Vega, Nova, Luma, …) and base color — so the table simply inherits your existing look with nothing to override.
No table-specific theme
There is no separate table-specific theme. Whatever your shadcn style and base color are, the table already matches them.
Design tokens
The only styling the table introduces is two design tokens, injected into your globals.css via the registry's cssVars:
--highlight--highlight-foreground
They are used for filter-match highlighting and fall back to --accent / --accent-foreground when unset. To customize the highlight color, override them in your stylesheet:
:root {
--highlight: oklch(0.95 0.12 95);
--highlight-foreground: oklch(0.2 0 0);
}
.dark {
--highlight: oklch(0.45 0.1 95);
--highlight-foreground: oklch(0.98 0 0);
}
See Column filtering for where highlighting appears.
Density and dark mode
Density vertical padding is controlled by the component itself, not by a CSS variable. Dark mode is whatever your app's theme provider sets — for example next-themes toggling the .dark class. The table reads the same tokens in either mode.
Retheming
To retheme, change your shadcn base color or CSS variables. Because the table consumes your primitives and tokens directly, it follows along — there are no table-specific changes to make.