# Theming studio
Live token playground: brand color, density, radius, font, dark/light, zebra. Copy-ready CSS snippet, persists across reloads.
Uses `@svgrid/grid` (MIT). Category: Themes & Styling. Live demo: https://svgrid.com/demos/37-theming-studio/
Install: `npm i @svgrid/grid` (Svelte 5).
## About this example
A live token playground for the Svelte 5 data grid. Sliders and colour pickers write --sg-accent, --sg-bg, --sg-header-bg, --sg-border and --sg-radius, choose the font family, switch dark and light through the data-theme attribute and set density through rowHeight, and the grid restyles in real time. A Copy CSS pane emits the full :root snippet to paste into a stylesheet, and the settings persist in localStorage across reloads.
A live token playground. Move sliders / pick colors → the grid restyles in real time. The "can I make it ours" answer for any evaluator looking at this from a design-system perspective.
What's adjustable, and what CSS variable each control writes:
- Brand accent → --sg-accent (header label, selection, focus)
- Surface color → --sg-bg (cell background)
- Header bg → --sg-header-bg
- Border color → --sg-border
- Density → row height (passed straight to the grid prop)
- Radius → --sg-radius (cell rounding via override)
- Font family → wrapper `font-family`
- Dark / light → data-theme attribute on the wrapper
A "Copy CSS" pane at the bottom emits the full `:root { ... }` snippet so the buyer can paste it straight into their stylesheet. Settings persist across page reloads via localStorage so the demo remembers the configuration the user landed on.
## Imports, features and API used
- Imports: `@svgrid/grid`
- Table features registered: `rowSortingFeature`, `columnFilteringFeature`
## Frequently asked questions
### How is the grid styled?
Entirely through --sg-* custom properties. Set them on any wrapper element and every grid inside picks them up; the studio writes them on its wrapper as you move the controls.
### How do I switch to dark mode?
Set data-theme='dark' on a wrapper or on . The theme stylesheets define a dark token set under that attribute, so the switch is one attribute change.
### Is there a shortcut for density?
rowHeight is a grid prop, so pass 28 for compact or 44 for comfortable; padding tokens follow the row height in the built-in themes.
## Related documentation
- [Recipes / Cookbook](https://svgrid.com/docs/help/recipes.md)
## Related articles
- [Inside SvGrid: A Theming System on CSS Variables](https://svgrid.com/blog/building-the-theming-system/) - How SvGrid uses --sg-* CSS custom properties to make theming a CSS problem, not a JavaScript one - and why that keeps dark mode, design system adoption, and per-grid overrides simple.
- [Theming SvGrid with Tailwind CSS v4](https://svgrid.com/blog/theming-svgrid-with-tailwind/) - SvGrid's --sg-* tokens and Tailwind v4's CSS custom properties live in the same cascade. Wire them together in one CSS file and dark mode, rebranding, and multi-theme pages all become trivial.
- [Theming a Svelte Data Grid with CSS Variables and Dark Mode](https://svgrid.com/blog/theming-and-dark-mode/) - How SvGrid's --sg-* CSS custom properties let you remap colors, density, and accent in plain CSS - with a full light/dark/accent switcher wired in Svelte 5.
## Source code (37-theming-studio.svelte)
```svelte
{#snippet AvatarCell(props: { row: Person })}
{@const initials = props.row.name.split(' ').map((p) => p[0]).join('').slice(0, 2)}
{initials}{props.row.name}
{/snippet}
{#snippet StatusCell(props: { row: Person })}
{props.row.status}
{/snippet}