Data Grid & Pivot Table Theme Builder

Design a colour theme for the KanuniLabs DataGrid and PivotGrid, in React or plain JavaScript. Start from one of 36 light and dark schemes, change any colour on the real grids, watch the contrast checks, and export the stylesheet. Free, no account.

Start building How theming works

Build your theme

What you can do with it

  • 36 schemes to start from

    22 light and 14 dark, from quiet neutrals to high-contrast and colourful sets. Filter by mode or family, or search by name.

  • A live preview on the real grids

    The DataGrid shows grouping, totals, selection, editing and the filter row; the PivotGrid shows subtotals and the grand total. Right-click or open a filter: the popups use your theme too.

  • Change any colour

    Edit the few seed colours a scheme is built from — page, cells, text, accent, header band, borders, status colours — or pin any of the 36 derived tokens by hand.

  • Contrast measured as you go

    19 WCAG contrast pairs are re-measured on every change, each with its ratio, the minimum and pass or fail.

  • Density and structure

    Preview compact, normal and comfortable rows on both grids, and the six DataGrid structure themes. They stay separate from colour, so one theme works with any of them.

  • Export, import, keep

    Copy or download a CSS stylesheet, the JSON definition, or a PivotGrid theme object. Import the JSON to keep editing; themes are saved in your browser.

Use your theme in an app

The CSS export is one file for both grids. Load it after the grid stylesheets and pass the theme id — as palette to the DataGrid and as theme.id to the PivotGrid. A packaged scheme works the same way, from the stylesheet that ships with each package.

import '@kanunilabs/datagrid-react/styles.css';
import '@kanunilabs/pivotgrid-react/styles.css';
import './acme.css'; // exported from the Theme Builder

<DataGrid palette="acme" density="compact" dataSource={rows} columns={columns} />
<BasePivotGrid theme={{ id: 'acme' }} density="compact" data={rows} initialFields={fields} />
// Plain JavaScript: the same options, here with a packaged scheme
import '@kanunilabs/datagrid/styles.css';
import '@kanunilabs/datagrid/themes/graphite.css';

createGrid(host, { palette: 'graphite', /* … */ });
createPivotGrid(host, { theme: { id: 'graphite' }, /* … */ });

Full details: DataGrid theming guide · PivotGrid colour schemes

The 36 colour schemes

Each scheme is a handful of seed colours from which every token is derived and then measured. Use one as it is, or start from it in the builder above. Try them on the full DataGrid demo.

Light schemes (22)

  • Porcelain porcelainCrisp white, cool ink and a clear blue — the everyday default.
  • Ivory ivoryWarm off-white with a bronze accent; quiet and premium.
  • Stone stoneWarm greys and a graphite accent — low noise, high polish.
  • Mist mistCool grey surfaces and a steel-blue accent for analytical work.
  • Glacier glacierBlue-grey header band over white cells, a deep sky accent.
  • Slate slateLight slate surfaces with an indigo-slate accent; technical and calm.
  • Linen linenCream cells and a sage accent; natural and soft for long sessions.
  • Sandstone sandstoneSand and beige with a terracotta accent.
  • Taupe taupeSoft grey-brown neutrals and a cocoa accent; understated.
  • Azure azureA blue-tinted header band and a confident blue accent.
  • Indigo indigoWhite cells under a lavender band, an indigo accent.
  • Teal tealFresh mint band and a deep teal accent.
  • Lagoon lagoonCyan-washed surfaces and an ocean accent.
  • Emerald emeraldGreen-tinted band and an emerald accent; good for finance.
  • Orchid orchidSoft violet band and a vivid violet accent.
  • Rose roseA blush band and a muted crimson accent.
  • Amber amberHoney band and an amber accent; warm and bright.
  • Coral coralPeach band and a coral-orange accent.
  • Corporate corporateAn ink header band over white cells; boardroom-formal.
  • Editorial editorialPaper white and deep red, like a printed report.
  • Monochrome monochromePure greyscale: no hue anywhere, the accent is ink.
  • High contrast light contrast-lightBlack on white with strong rules, for low vision and bright rooms.

Dark schemes (14)

  • Charcoal charcoalNeutral charcoal with a soft blue accent; the everyday dark.
  • Graphite graphiteMid-grey graphite and a silver-blue accent; gentle contrast.
  • Onyx onyxSoft black for OLED screens, with a lilac accent.
  • Slate night slate-nightDeep slate and a sky accent — technical and cool.
  • Steel steelBlue-grey steel surfaces and a cornflower accent.
  • Midnight midnightNavy depth with a bright blue accent.
  • Indigo night indigo-nightIndigo-tinted dark and a periwinkle accent.
  • Forest forestDeep green-black with an emerald accent.
  • Deep sea deep-seaDark teal water and an aqua accent.
  • Aubergine auberginePlum-dark surfaces with a soft violet accent.
  • Burgundy burgundyWine-dark and a rose accent; warm for a dark.
  • Ember emberBrown-black with a glowing amber accent.
  • High contrast dark contrast-darkWhite on black with bright rules and a yellow accent.
  • Terminal terminalGreen-on-black for dense, data-heavy monitoring screens.

Frequently asked questions

Is the Theme Builder free?
Yes. The builder is free to use with no account, and the colour schemes it exports work with the free Community packages of the DataGrid and PivotGrid — no licence key is needed for a theme.
Which frameworks does a theme work with?
React and plain JavaScript. The exported stylesheet targets the DataGrid and PivotGrid packages for both: @kanunilabs/datagrid-react and @kanunilabs/datagrid, @kanunilabs/pivotgrid-react and @kanunilabs/pivotgrid.
Does one theme cover both the data grid and the pivot table?
Yes. The CSS export holds a DataGrid block and a PivotGrid block generated from the same colours, so both grids match. Menus, filter popups and dialogs follow the theme too.
How is accessibility checked?
Every change is measured against 19 WCAG contrast pairs — body, header and muted text at 4.5:1, the accent and the focus ring at 3:1 — and colours the theme had to deepen to stay readable are listed. All 36 packaged schemes pass every pair, and the test suite checks it.
Can I keep editing a theme later?
Yes. Export the JSON definition and import it back into the builder. Your themes are also saved in the browser you made them in.
Is there a dark mode?
There are 14 dark schemes and 22 light ones. Each scheme carries its own mode, so a dark scheme stays dark without any extra setting.

Next steps