Theming

Strata is styled with CSS custom properties. Override the --strata-* tokens in your own CSS to match your design system, or compose a branded theme at runtime with createTheme.

Token-based theming

.my-app {
  --strata-accent: #7c3aed;
  --strata-row-hover-bg: #f3e8ff;
}

Built-in themes

Optional CSS files expose the standard token set and dark mode:

import 'strata-grid/theme/tokens.css';
import 'strata-grid/theme/dark.css';

Use theme="high-contrast-light" or theme="high-contrast-dark" for bundled high-contrast presets, and theme="auto" to follow the operating system color scheme.

Runtime composition

import { createTheme } from 'strata-grid';

const theme = createTheme('dark', {
  tokens: { '--strata-accent': '#7c3aed' },
});

<DataGrid theme={theme.className} />;
theme.dispose();

Density, striping, and print

• density: 'compact' | 'standard' | 'comfortable'.
• striped: toggles alternating row backgrounds.
• transitions: opts into smooth token transitions.
• usePrintMode(): exposes print media state for printable layouts.

Toggle base theme (light)

Name

Qty

2 rows

Border & frozen-pane tokens

Fine-grained control over separators and the frozen/pinned pane treatment:

Token	Controls	Default
--strata-border-cell-vertical	Data-cell vertical separator	#eef0f3
--strata-border-header-vertical	Header-cell vertical separator	#e5e5e7
--strata-border-frozen	Selection / pinned pane separator	#d8dce2
--strata-shadow-frozen	Left pinned-pane shadow	1px 0 0 rgba(148, 163, 184, 0.16)
--strata-shadow-frozen-right	Right pinned-pane shadow	-1px 0 0 rgba(148, 163, 184, 0.16)

The horizontal scrollbar row auto-collapses when columns fit the viewport (no overflow), so a grid sized to its content shows no empty scrollbar strip.