Theming
8 articles on theming in a Svelte 5 data grid: practical guides with copy-paste code, from the team building SvGrid.
- A Density (Row-Height) Toggle for SvGrid - Let users pick compact, comfortable, or spacious rows - wired through CSS tokens, synced with the virtualizer, and persisted across sessions.
- Inside SvGrid: A Theming System on CSS Variables - 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.
- SvGrid drops into your shadcn-svelte app - A side-by-side look at how little it takes to swap a hand-written shadcn Table for a full SvGrid - same tokens, same dark mode, plus sorting, filtering, and virtualization for free.
- Theming SvGrid with Tailwind CSS v4 - 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.
- Using SvGrid with shadcn-svelte - Wire SvGrid's --sg-* CSS tokens to shadcn-svelte's design variables so the grid inherits your app's palette and dark mode automatically - no JavaScript required.
- Theming a Svelte Data Grid with CSS Variables 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.
- Using SvGrid with Flowbite Svelte - Wire SvGrid into a Flowbite Svelte app - map CSS tokens for dark mode, build toolbar controls from Flowbite components, and put Flowbite Buttons inside cell renderers.
- Using SvGrid with Skeleton UI - Map SvGrid's CSS token system to Skeleton UI's theme variables once, and the grid inherits dark mode, palette swaps, and every future Skeleton theme automatically.