# 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.

## The card

The whole table — toolbars, table and pagination — sits inside your own shadcn `Card`, so its corners, border, shadow and background match the other cards in your app. Change your `Card` (or your `--radius` and `--card` tokens) and the table follows.

To drop the frame, for example when the table already sits inside a card of yours, override the root through [`slotProps`](/docs/guides/slot-props):

```tsx
useDataTable({
  // …
  slotProps: {
    root: { className: "rounded-none bg-transparent shadow-none ring-0" },
  },
})
```

## 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:

```css
: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](/docs/guides/column-filtering) for where highlighting appears.

## Density and dark mode

Density padding (rows and toolbars) is controlled by the component itself, not by your theme. 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.

## Related

- [Installation](https://monabbir-ahmmad.github.io/shadcn-react-table/docs/installation): The data table is distributed as a shadcn registry item.
- [Column filtering](https://monabbir-ahmmad.github.io/shadcn-react-table/docs/guides/column-filtering): Each column can expose its own filter control in a per-column filter row.