@svgrid/create 2.2.1 → 2.4.0

package/README.md

@@ -1,77 +1,81 @@
-<p align="center">
-  <img src="https://svgrid.com/brand/svgrid-logo-icon-1200.png" alt="SvGrid" width="100" height="100" />
-</p>
-
-<h1 align="center">@svgrid/create</h1>
-
-<p align="center"><strong>Scaffold a Svelte 5 app with a data grid already wired up.</strong></p>
-
-<p align="center">
-  <a href="https://www.npmjs.com/package/@svgrid/create"><img src="https://img.shields.io/npm/v/%40svgrid%2Fcreate.svg?label=%40svgrid%2Fcreate" alt="npm version" /></a>
-  <a href="./LICENSE"><img src="https://img.shields.io/badge/license-MIT-brightgreen.svg" alt="MIT License" /></a>
-</p>
-
-<p align="center">
-  <a href="https://svgrid.com">Website</a> ·
-  <a href="https://svgrid.com/docs/">Docs</a> ·
-  <a href="https://svgrid.com/demos/">Demos</a>
-</p>
-
----
-
-Scaffold a [Svelte](https://svelte.dev) app powered by
-[SvGrid](https://svgrid.com) - the Svelte 5 data grid and data table - in one
-command.
-
-```bash
-npm create @svgrid@latest
-# or
-pnpm create @svgrid
-# or
-yarn create @svgrid
-```
-
-Interactive by default. Or pass a directory and template directly:
-
-```bash
-npm create @svgrid@latest my-app -- --template admin-dashboard
-pnpm create @svgrid my-app -t minimal
-```
-
-## Templates
-
-| Template | Stack | Best for |
-| --- | --- | --- |
-| `minimal` | Vite + Svelte 5 + SvGrid | Dropping a grid into something quickly |
-| `admin-dashboard` | SvelteKit + Tailwind + SvGrid, deploy to Vercel | A real dashboard / internal tool |
-
-## Options
-
-| Flag | Description |
-| --- | --- |
-| `--template`, `-t` | `minimal` or `admin-dashboard` |
-| `--theme <id>` | `admin-dashboard` only. One of `@svgrid/grid`'s 19 built-in presets - shadcn, Tailwind, Material, Excel, Fluent, and more (default: `tailwind`) |
-| `--dark` / `--light` | `admin-dashboard` only. Start in dark or light mode (default: `dark`) |
-| `--force`, `-f` | Scaffold into a non-empty directory |
-| `--help`, `-h` | Show usage |
-
-Choosing `admin-dashboard` interactively also prompts for a theme and light/dark
-mode - or skip the prompts with flags:
-
-```bash
-npm create @svgrid@latest my-app -- -t admin-dashboard --theme material --light
-```
-
-Then:
-
-```bash
-cd my-app
-npm install
-npm run dev
-```
-
-All templates use the free MIT `@svgrid/grid` core. Add
-[`@svgrid/enterprise`](https://svgrid.com/pricing/) for Excel/PDF export, import,
-print, pivot, and AI helpers.
-
-SvGrid(TM) is a trademark of jQWidgets Ltd. This package is MIT-licensed.
+<p align="center">
+  <img src="https://svgrid.com/brand/svgrid-logo-icon-1200.png" alt="SvGrid" width="100" height="100" />
+</p>
+
+<h1 align="center">@svgrid/create</h1>
+
+<p align="center"><strong>Scaffold a Svelte 5 app with a data grid already wired up.</strong></p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@svgrid/create"><img src="https://img.shields.io/npm/v/%40svgrid%2Fcreate.svg?label=%40svgrid%2Fcreate" alt="npm version" /></a>
+  <a href="./LICENSE"><img src="https://img.shields.io/badge/license-MIT-brightgreen.svg" alt="MIT License" /></a>
+</p>
+
+<p align="center">
+  <a href="https://svgrid.com">Website</a> ·
+  <a href="https://svgrid.com/docs/">Docs</a> ·
+  <a href="https://svgrid.com/demos/">Demos</a>
+</p>
+
+---
+
+Scaffold a [Svelte](https://svelte.dev) app powered by
+[SvGrid](https://svgrid.com) - the Svelte 5 data grid and data table - in one
+command.
+
+```bash
+npm create @svgrid@latest
+# or
+pnpm create @svgrid
+# or
+yarn create @svgrid
+```
+
+Interactive by default. Or pass a directory and template directly:
+
+```bash
+npm create @svgrid@latest my-app -- --template admin-dashboard
+pnpm create @svgrid my-app -t minimal
+```
+
+## Templates
+
+| Template | Stack | Best for |
+| --- | --- | --- |
+| `minimal` | Vite + Svelte 5 + SvGrid | Dropping a grid into something quickly |
+| `admin-dashboard` | SvelteKit + Tailwind + SvGrid, deploy to Vercel | A real dashboard / internal tool |
+
+## Options
+
+| Flag | Description |
+| --- | --- |
+| `--template`, `-t` | `minimal` or `admin-dashboard` |
+| `--theme <id>` | One of `@svgrid/grid`'s 20 built-in presets - shadcn, Tailwind, Material, Excel, Fluent, and more (default: `tailwind`) |
+| `--dark` / `--light` | Start in dark or light mode. `minimal` follows the OS when neither is given |
+| `--force`, `-f` | Scaffold into a non-empty directory |
+| `--help`, `-h` | Show usage |
+
+Either template prompts for a theme and a light/dark mode when run
+interactively, or takes them as flags:
+
+```bash
+npm create @svgrid@latest my-app -- -t admin-dashboard --theme material --light
+npm create @svgrid@latest my-app -- -t minimal --theme nord --dark
+```
+
+Both ship a working toggle, so the choice is a starting point rather than
+something you are stuck with.
+
+Then:
+
+```bash
+cd my-app
+npm install
+npm run dev
+```
+
+All templates use the free MIT `@svgrid/grid` core. Add
+[`@svgrid/enterprise`](https://svgrid.com/pricing/) for Excel/PDF export, import,
+print, pivot, and AI helpers.
+
+SvGrid(TM) is a trademark of jQWidgets Ltd. This package is MIT-licensed.

package/index.mjs

@@ -80,8 +80,8 @@ ${Object.entries(TEMPLATES)
   .join('\n')}
 
 ${color('bold', 'Options')}
-  --theme <id>       admin-dashboard only. One of: ${THEME_IDS.join(', ')} (default: tailwind).
-  --dark / --light   admin-dashboard only. Start in dark or light mode (default: dark).
+  --theme <id>       One of: ${THEME_IDS.join(', ')} (default: tailwind).
+  --dark / --light   Start in dark or light mode (default: dark).
   --force            Scaffold into a non-empty directory.
 
 ${color('bold', 'Examples')}
@@ -93,17 +93,16 @@ ${color('bold', 'Examples')}
 }
 
 const THEME_IDS = [
-  'shadcn', 'tailwind', 'material', 'excel', 'fluent', 'carbon', 'sap',
+  'ember', 'shadcn', 'tailwind', 'material', 'excel', 'fluent', 'carbon', 'sap',
   'salesforce', 'atlassian', 'github', 'antd', 'ag-alpine', 'bootstrap',
   'vercel', 'linear', 'notion', 'nord', 'dracula', 'catppuccin',
 ]
 
 /**
- * Resolve the theme + mode to apply (admin-dashboard only): from `--theme` /
- * `--dark` / `--light` flags, or (in a TTY) an interactive prompt; otherwise
- * left untouched (the template's own dark-by-default look stands). Reuses
- * `@svgrid/grid/themes`'s own preset list, so the picker can never drift from
- * the canonical set.
+ * Resolve the theme + mode to apply: from `--theme` / `--dark` / `--light`
+ * flags, or (in a TTY) an interactive prompt; otherwise left untouched (the
+ * template's own default look stands). Reuses `@svgrid/grid/themes`'s own
+ * preset list, so the picker can never drift from the canonical set.
  */
 async function promptTheme(args, ask, interactive) {
   let themes
@@ -132,13 +131,24 @@ async function promptTheme(args, ask, interactive) {
     const a = await ask('Light or dark mode? (light/dark)', 'dark')
     mode = /^l(ight)?$/i.test(a) ? 'light' : 'dark'
   }
+  // Whether the mode was actually chosen, as opposed to falling through to the
+  // default below. minimal follows the OS when nobody said, which is only
+  // distinguishable from an explicit --dark by keeping this flag.
+  const explicitMode = mode != null
   mode ??= 'dark' // matches the template's existing default - only patched when 'light' is chosen.
 
-  return { themeId, mode, name: themes.getThemePreset(themeId)?.name ?? themeId, themes }
+  return { themeId, mode, explicitMode, name: themes.getThemePreset(themeId)?.name ?? themeId, themes }
 }
 
-/** Rewrite `app.css` (between the `svgrid-theme` markers) with the resolved
- *  `--sg-*` tokens for the chosen theme. */
+/** Rewrite `app.css` between the `svgrid-theme` markers.
+ *
+ *  The two templates want different things there. admin-dashboard inlines the
+ *  resolved `--sg-*` tokens, because its Tailwind layer aliases them to
+ *  `--app-*` and having the values on the page makes them editable. minimal
+ *  just points at the preset stylesheet the package already ships, which keeps
+ *  its `app.css` short enough to read in one go. Which one we are looking at
+ *  is decided by what the marked block currently holds, not by the template
+ *  name, so a hand-edited project still round-trips. */
 async function applyTheme(destDir, choice) {
   if (!choice) return
   const { themeId, themes } = choice
@@ -149,12 +159,19 @@ async function applyTheme(destDir, choice) {
     const lines = Object.entries(tokens).map(([k, v]) => `  ${k}: ${v};`).join('\n')
     return `${selector} {\n${lines}\n  color-scheme: ${scheme};\n}`
   }
-  const css = `${block(':root', light, 'light')}\n${block(":root[data-theme='dark']", dark, 'dark')}`
+  const tokenBlocks = `${block(':root', light, 'light')}\n${block(":root[data-theme='dark']", dark, 'dark')}`
 
   const cssPath = join(destDir, 'src', 'app.css')
   const cssText = await readFile(cssPath, 'utf8').catch(() => null)
   if (cssText == null) return
-  const marked = /\/\* svgrid-theme:start \*\/[\s\S]*?\/\* svgrid-theme:end \*\//
+  const marked = /\/\* svgrid-theme:start \*\/([\s\S]*?)\/\* svgrid-theme:end \*\//
+  // A CSS @import has to stay at the top of the file, so where the block holds
+  // one we swap the preset id in place instead of replacing it with token
+  // declarations that would then sit above the import.
+  const held = cssText.match(marked)
+  const css = held && /@import\s/.test(held[1])
+    ? `@import '@svgrid/grid/themes/${preset.id}.css';`
+    : tokenBlocks
   if (marked.test(cssText)) {
     await writeFile(cssPath, cssText.replace(marked, `/* svgrid-theme:start */\n${css}\n/* svgrid-theme:end */`))
   }
@@ -204,6 +221,27 @@ async function applyMode(destDir, choice) {
   }
 }
 
+/** minimal picks its start mode in an inline script in `index.html`, falling
+ *  back to the OS preference. Pin it only when light or dark was actually asked
+ *  for - following the OS is the better default for anyone who did not say. */
+async function applyModeMinimal(destDir, choice) {
+  if (!choice || !choice.explicitMode) return
+
+  const htmlPath = join(destDir, 'index.html')
+  const html = await readFile(htmlPath, 'utf8').catch(() => null)
+  if (html == null) return
+
+  await writeFile(
+    htmlPath,
+    html
+      .replace(`<html lang="en" data-theme="light">`, `<html lang="en" data-theme="${choice.mode}">`)
+      .replace(
+        `var fallback = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'`,
+        `var fallback = '${choice.mode}'`,
+      ),
+  )
+}
+
 function sanitizeName(name) {
   return (
     name
@@ -289,7 +327,7 @@ async function main() {
   if (!template) {
     if (interactive) {
       stdout.write(`\n  Templates:\n`)
-      Object.entries(TEMPLATES).forEach(([k, t], i) => {
+      Object.entries(TEMPLATES).forEach(([, t], i) => {
         stdout.write(`   ${color('cyan', String(i + 1))}. ${t.label}\n`)
       })
       const pick = await ask('\nChoose a template (1-2):', '1')
@@ -328,9 +366,9 @@ async function main() {
     process.exit(1)
   }
 
-  // 3b. Theme + light/dark mode - admin-dashboard only (minimal has no theme
-  // system to pick from).
-  const themeChoice = template === 'admin-dashboard' ? await promptTheme(args, ask, interactive) : null
+  // 3b. Theme + light/dark mode. Both templates carry the full --sg-* palette
+  // and a toggle, so both get asked.
+  const themeChoice = await promptTheme(args, ask, interactive)
   if (rl) rl.close()
 
   // 4. Scaffold.
@@ -339,12 +377,17 @@ async function main() {
   await setProjectName(destDir, projectName)
   await applyTheme(destDir, themeChoice)
   await applyMode(destDir, themeChoice)
+  await applyModeMinimal(destDir, themeChoice)
 
   // 5. Next steps.
   const rel = isAbsolute(target) || target.startsWith('.') ? target : `./${target}`
   stdout.write(`\n${color('green', '✔')} Scaffolded ${color('bold', projectName)} (${template}) into ${rel}\n`)
   if (themeChoice) {
-    stdout.write(`  ${color('dim', 'theme')} ${themeChoice.name} (${themeChoice.mode})\n`)
+    // minimal only pins a mode when one was asked for; otherwise it reads the
+    // OS preference at load, so reporting "dark" here would be a lie.
+    const pinned = themeChoice.explicitMode || template === 'admin-dashboard'
+    const mode = pinned ? themeChoice.mode : 'follows your OS'
+    stdout.write(`  ${color('dim', 'theme')} ${themeChoice.name} (${mode})\n`)
   }
   stdout.write(`\n`)
   stdout.write(`${color('bold', 'Next steps')}\n`)

package/package.json

@@ -4,7 +4,7 @@
     "type": "commercial",
     "url": "https://svgrid.com/pricing"
   },
-  "version": "2.2.1",
+  "version": "2.4.0",
   "description": "Scaffold a Svelte app powered by SvGrid in one command: npm create @svgrid@latest",
   "type": "module",
   "license": "MIT",
@@ -36,7 +36,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@svgrid/grid": "^2.2.27"
+    "@svgrid/grid": "^2.4.0"
   },
   "scripts": {
     "sync-templates": "node sync-templates.mjs"

package/templates/admin-dashboard/_package.json

@@ -11,7 +11,7 @@
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
-    "@sveltejs/adapter-vercel": "^5.5.0",
+    "@sveltejs/adapter-vercel": "^6.3.2",
     "@sveltejs/kit": "^2.15.0",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@tailwindcss/vite": "^4.2.4",

package/templates/admin-dashboard/src/app.css

@@ -1,180 +1,180 @@
-@import 'tailwindcss';
-
-/* Tailwind's `dark:` modifier follows the `data-theme` attribute the layout
- * writes onto <html>, so utility classes and the grid's own --sg-* tokens
- * switch together. */
-@custom-variant dark (&:where(html[data-theme='dark'], html[data-theme='dark'] *));
-
-/* ---------------------------------------------------------------------------
- * SvGrid theme tokens - one of @svgrid/grid's 19 built-in presets (pick one
- * with `npm create @svgrid@latest -- --theme <id> [--dark]`, or edit the
- * values below by hand). The dashboard shell reads them through the --app-*
- * aliases further down, so the whole app themes as one, not just the grid.
- * ------------------------------------------------------------------------- */
-/* svgrid-theme:start */
-:root {
-  --sg-bg: #ffffff;
-  --sg-fg: #0f172a;
-  --sg-muted: #64748b;
-  --sg-border: #e2e8f0;
-  --sg-header-bg: #f8fafc;
-  --sg-header-fg: #0f172a;
-  --sg-bg-subtle: #f8fafc;
-  --sg-row-alt-bg: #ffffff;
-  --sg-row-hover-bg: #f1f5f9;
-  --sg-selection-bg: #e0e7ff;
-  --sg-input-bg: #ffffff;
-  --sg-input-border: #e2e8f0;
-  --sg-accent: #4f46e5;
-  --sg-on-accent: #ffffff;
-  --sg-radius: 6px;
-  --sg-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
-  --sg-scrollbar-bg: #f8fafc;
-  --sg-scrollbar-border: #e2e8f0;
-  --sg-scrollbar-thumb: #64748b;
-  --sg-scrollbar-thumb-hover: #0f172a;
-  --sg-scrollbar-thumb-active: #0f172a;
-  --sg-scrollbar-arrow: #64748b;
-  --sg-scrollbar-arrow-hover: #0f172a;
-  --sg-scrollbar-arrow-hover-bg: #f1f5f9;
-  --sg-scrollbar-arrow-active: #0f172a;
-  --sg-scrollbar-arrow-active-bg: #e0e7ff;
-  --sg-scrollbar-arrow-disabled: #e2e8f0;
-  color-scheme: light;
-}
-:root[data-theme='dark'] {
-  --sg-bg: #0f172a;
-  --sg-fg: #f8fafc;
-  --sg-muted: #94a3b8;
-  --sg-border: #334155;
-  --sg-header-bg: #1e293b;
-  --sg-header-fg: #f8fafc;
-  --sg-bg-subtle: #1e293b;
-  --sg-row-alt-bg: #0f172a;
-  --sg-row-hover-bg: #1e293b;
-  --sg-selection-bg: #312e81;
-  --sg-input-bg: #0f172a;
-  --sg-input-border: #334155;
-  --sg-accent: #818cf8;
-  --sg-on-accent: #18181b;
-  --sg-radius: 6px;
-  --sg-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
-  --sg-scrollbar-bg: #1e293b;
-  --sg-scrollbar-border: #334155;
-  --sg-scrollbar-thumb: #94a3b8;
-  --sg-scrollbar-thumb-hover: #f8fafc;
-  --sg-scrollbar-thumb-active: #f8fafc;
-  --sg-scrollbar-arrow: #94a3b8;
-  --sg-scrollbar-arrow-hover: #f8fafc;
-  --sg-scrollbar-arrow-hover-bg: #1e293b;
-  --sg-scrollbar-arrow-active: #f8fafc;
-  --sg-scrollbar-arrow-active-bg: #312e81;
-  --sg-scrollbar-arrow-disabled: #334155;
-  color-scheme: dark;
-}
-/* svgrid-theme:end */
-
-/* Dashboard shell aliases - map the chrome to the grid tokens above, so any
- * theme (light or dark, whichever preset) reskins the whole page as one. */
-:root {
-  --app-bg: var(--sg-row-alt-bg);
-  --app-panel: var(--sg-bg);
-  --app-border: var(--sg-border);
-  --app-fg: var(--sg-fg);
-  --app-muted: var(--sg-muted);
-  --app-accent: var(--sg-accent);
-}
-
-html,
-body {
-  background: var(--app-bg);
-  color: var(--app-fg);
-  font-family: var(--sg-font, Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
-    sans-serif);
-}
-
-/* ---------------------------------------------------------------------------
- * Optional polish. The grid themes itself from the --sg-* tokens above, so it
- * already follows light / dark with no extra CSS. These rules only add table
- * niceties the grid leaves to the app: cell gridlines, zebra striping, row
- * hover, and a styled pagination bar. Delete any you don't want.
- * ------------------------------------------------------------------------- */
-
-/* Cell gridlines (the grid draws none by default). */
-.sv-grid-column,
-.sv-grid-cell {
-  border-right: 1px solid var(--sg-border) !important;
-  border-bottom: 1px solid var(--sg-border) !important;
-}
-.sv-grid-table tr > :last-child.sv-grid-column,
-.sv-grid-table tr > :last-child.sv-grid-cell {
-  border-right: 0 !important;
-}
-
-/* Zebra striping + row hover. */
-.sv-grid-table tbody tr:nth-child(even) .sv-grid-cell {
-  background: var(--sg-row-alt-bg) !important;
-}
-.sv-grid-table tbody tr:hover .sv-grid-cell {
-  background: var(--sg-row-hover-bg) !important;
-}
-/* Selection wins over zebra (declared after, same specificity). */
-.sv-grid-table tbody tr.sv-grid-row-selected .sv-grid-cell,
-.sv-grid-table tbody tr .sv-grid-cell[data-selected-range='true'] {
-  background: var(--sg-selection-bg) !important;
-}
-
-/* Pagination bar: layout + theme (the grid ships the markup, not the styling). */
-.sv-grid-pagination {
-  display: flex !important;
-  align-items: center !important;
-  justify-content: flex-end !important;
-  gap: 24px !important;
-  padding: 12px 16px !important;
-  border: 1px solid var(--sg-border) !important;
-  border-top: 0 !important;
-  border-radius: 0 0 6px 6px !important;
-  background: var(--sg-header-bg) !important;
-  color: var(--sg-fg) !important;
-  font-size: 13px !important;
-}
-.sv-grid-pagination-pagesize {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--sg-muted);
-}
-.sv-grid-pagination-pagesize select,
-.sv-grid-pagination-btn {
-  border: 1px solid var(--sg-input-border);
-  background: var(--sg-input-bg);
-  color: var(--sg-fg);
-  border-radius: 5px;
-  height: 28px;
-  font: inherit;
-  font-size: 13px;
-  cursor: pointer;
-}
-.sv-grid-pagination-btn {
-  display: inline-flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  width: 28px !important;
-  border: 0 !important;
-  background: transparent !important;
-  font-size: 16px !important;
-}
-.sv-grid-pagination-btn:hover:not(:disabled) {
-  background: var(--sg-input-bg) !important;
-  color: var(--sg-accent) !important;
-}
-.sv-grid-pagination-btn:disabled {
-  color: var(--sg-muted) !important;
-  opacity: 0.4 !important;
-  cursor: default !important;
-}
-.sv-grid-pagination-nav {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-}
+@import 'tailwindcss';
+
+/* Tailwind's `dark:` modifier follows the `data-theme` attribute the layout
+ * writes onto <html>, so utility classes and the grid's own --sg-* tokens
+ * switch together. */
+@custom-variant dark (&:where(html[data-theme='dark'], html[data-theme='dark'] *));
+
+/* ---------------------------------------------------------------------------
+ * SvGrid theme tokens - one of @svgrid/grid's 20 built-in presets (pick one
+ * with `npm create @svgrid@latest -- --theme <id> [--dark]`, or edit the
+ * values below by hand). The dashboard shell reads them through the --app-*
+ * aliases further down, so the whole app themes as one, not just the grid.
+ * ------------------------------------------------------------------------- */
+/* svgrid-theme:start */
+:root {
+  --sg-bg: #ffffff;
+  --sg-fg: #0f172a;
+  --sg-muted: #64748b;
+  --sg-border: #e2e8f0;
+  --sg-header-bg: #f8fafc;
+  --sg-header-fg: #0f172a;
+  --sg-bg-subtle: #f8fafc;
+  --sg-row-alt-bg: #ffffff;
+  --sg-row-hover-bg: #f1f5f9;
+  --sg-selection-bg: #e0e7ff;
+  --sg-input-bg: #ffffff;
+  --sg-input-border: #e2e8f0;
+  --sg-accent: #4f46e5;
+  --sg-on-accent: #ffffff;
+  --sg-radius: 6px;
+  --sg-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --sg-scrollbar-bg: #f8fafc;
+  --sg-scrollbar-border: #e2e8f0;
+  --sg-scrollbar-thumb: #64748b;
+  --sg-scrollbar-thumb-hover: #0f172a;
+  --sg-scrollbar-thumb-active: #0f172a;
+  --sg-scrollbar-arrow: #64748b;
+  --sg-scrollbar-arrow-hover: #0f172a;
+  --sg-scrollbar-arrow-hover-bg: #f1f5f9;
+  --sg-scrollbar-arrow-active: #0f172a;
+  --sg-scrollbar-arrow-active-bg: #e0e7ff;
+  --sg-scrollbar-arrow-disabled: #e2e8f0;
+  color-scheme: light;
+}
+:root[data-theme='dark'] {
+  --sg-bg: #0f172a;
+  --sg-fg: #f8fafc;
+  --sg-muted: #94a3b8;
+  --sg-border: #334155;
+  --sg-header-bg: #1e293b;
+  --sg-header-fg: #f8fafc;
+  --sg-bg-subtle: #1e293b;
+  --sg-row-alt-bg: #0f172a;
+  --sg-row-hover-bg: #1e293b;
+  --sg-selection-bg: #312e81;
+  --sg-input-bg: #0f172a;
+  --sg-input-border: #334155;
+  --sg-accent: #818cf8;
+  --sg-on-accent: #18181b;
+  --sg-radius: 6px;
+  --sg-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --sg-scrollbar-bg: #1e293b;
+  --sg-scrollbar-border: #334155;
+  --sg-scrollbar-thumb: #94a3b8;
+  --sg-scrollbar-thumb-hover: #f8fafc;
+  --sg-scrollbar-thumb-active: #f8fafc;
+  --sg-scrollbar-arrow: #94a3b8;
+  --sg-scrollbar-arrow-hover: #f8fafc;
+  --sg-scrollbar-arrow-hover-bg: #1e293b;
+  --sg-scrollbar-arrow-active: #f8fafc;
+  --sg-scrollbar-arrow-active-bg: #312e81;
+  --sg-scrollbar-arrow-disabled: #334155;
+  color-scheme: dark;
+}
+/* svgrid-theme:end */
+
+/* Dashboard shell aliases - map the chrome to the grid tokens above, so any
+ * theme (light or dark, whichever preset) reskins the whole page as one. */
+:root {
+  --app-bg: var(--sg-row-alt-bg);
+  --app-panel: var(--sg-bg);
+  --app-border: var(--sg-border);
+  --app-fg: var(--sg-fg);
+  --app-muted: var(--sg-muted);
+  --app-accent: var(--sg-accent);
+}
+
+html,
+body {
+  background: var(--app-bg);
+  color: var(--app-fg);
+  font-family: var(--sg-font, Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
+    sans-serif);
+}
+
+/* ---------------------------------------------------------------------------
+ * Optional polish. The grid themes itself from the --sg-* tokens above, so it
+ * already follows light / dark with no extra CSS. These rules only add table
+ * niceties the grid leaves to the app: cell gridlines, zebra striping, row
+ * hover, and a styled pagination bar. Delete any you don't want.
+ * ------------------------------------------------------------------------- */
+
+/* Cell gridlines (the grid draws none by default). */
+.sv-grid-column,
+.sv-grid-cell {
+  border-right: 1px solid var(--sg-border) !important;
+  border-bottom: 1px solid var(--sg-border) !important;
+}
+.sv-grid-table tr > :last-child.sv-grid-column,
+.sv-grid-table tr > :last-child.sv-grid-cell {
+  border-right: 0 !important;
+}
+
+/* Zebra striping + row hover. */
+.sv-grid-table tbody tr:nth-child(even) .sv-grid-cell {
+  background: var(--sg-row-alt-bg) !important;
+}
+.sv-grid-table tbody tr:hover .sv-grid-cell {
+  background: var(--sg-row-hover-bg) !important;
+}
+/* Selection wins over zebra (declared after, same specificity). */
+.sv-grid-table tbody tr.sv-grid-row-selected .sv-grid-cell,
+.sv-grid-table tbody tr .sv-grid-cell[data-selected-range='true'] {
+  background: var(--sg-selection-bg) !important;
+}
+
+/* Pagination bar: layout + theme (the grid ships the markup, not the styling). */
+.sv-grid-pagination {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: flex-end !important;
+  gap: 24px !important;
+  padding: 12px 16px !important;
+  border: 1px solid var(--sg-border) !important;
+  border-top: 0 !important;
+  border-radius: 0 0 6px 6px !important;
+  background: var(--sg-header-bg) !important;
+  color: var(--sg-fg) !important;
+  font-size: 13px !important;
+}
+.sv-grid-pagination-pagesize {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--sg-muted);
+}
+.sv-grid-pagination-pagesize select,
+.sv-grid-pagination-btn {
+  border: 1px solid var(--sg-input-border);
+  background: var(--sg-input-bg);
+  color: var(--sg-fg);
+  border-radius: 5px;
+  height: 28px;
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+.sv-grid-pagination-btn {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 28px !important;
+  border: 0 !important;
+  background: transparent !important;
+  font-size: 16px !important;
+}
+.sv-grid-pagination-btn:hover:not(:disabled) {
+  background: var(--sg-input-bg) !important;
+  color: var(--sg-accent) !important;
+}
+.sv-grid-pagination-btn:disabled {
+  color: var(--sg-muted) !important;
+  opacity: 0.4 !important;
+  cursor: default !important;
+}
+.sv-grid-pagination-nav {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}

package/templates/minimal/README.md

@@ -11,6 +11,25 @@ npm run build
 
 Open `src/App.svelte` and edit the `rows` / `columns` to use your own data.
 
+## Theme
+
+`src/app.css` imports one of the 20 presets that ship with `@svgrid/grid`.
+Swap the id to re-theme the grid and the page around it together:
+
+```css
+@import '@svgrid/grid/themes/nord.css';
+```
+
+Pick from `ember`, `shadcn`, `tailwind`, `material`, `fluent`, `carbon`,
+`antd`, `bootstrap`, `atlassian`, `salesforce`, `sap`, `github`, `linear`,
+`notion`, `vercel`, `excel`, `nord`, `dracula`, `catppuccin`, `ag-alpine`.
+
+Every preset carries a light and a dark palette. Dark hangs off
+`<html data-theme="dark">`, which the toggle in the header writes and
+`index.html` restores before the first paint. To drop the presets and write
+your own `--sg-*` values instead, see
+[Theme and density](https://svgrid.com/docs/getting-started/5-theme-and-density).
+
 ## Next steps
 
 - Add more features: `rowExpandingFeature`, `columnGroupingFeature`, pagination, pinned rows. See the [docs](https://svgrid.com/docs/).

package/templates/minimal/index.html

@@ -1,9 +1,19 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-theme="light">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>SvGrid app</title>
+    <script>
+      // Settle the theme before the first paint, otherwise the page renders in
+      // one palette and App.svelte's toggle swaps it a frame later. With nothing
+      // saved yet we follow the OS.
+      try {
+        var saved = localStorage.getItem('theme')
+        var fallback = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+        document.documentElement.dataset.theme = saved || fallback
+      } catch (e) {}
+    </script>
   </head>
   <body>
     <div id="app"></div>

package/templates/minimal/src/App.svelte

@@ -1,16 +1,23 @@
 <script>
-  import {
-    SvGrid,
-    tableFeatures,
-    rowSortingFeature,
-    columnFilteringFeature,
-    rowSelectionFeature,
-  } from '@svgrid/grid'
-
-  const features = tableFeatures({
-    rowSortingFeature,
-    columnFilteringFeature,
-    rowSelectionFeature,
+  import { SvGrid } from '@svgrid/grid'
+
+  // Capabilities are boolean props - `sortable`, `filterable`, `editable`,
+  // `groupable`, `pageable` - and each injects the feature it needs. For finer
+  // control you can register features explicitly with `tableFeatures({ ... })`
+  // and pass them as `features`; see docs/getting-started/4-features.md.
+
+  // Light/dark. The preset imported in src/app.css declares both palettes, so
+  // writing `data-theme` on <html> is all it takes to swap them. index.html has
+  // already restored the saved choice by the time this runs.
+  let theme = $state(document.documentElement.dataset.theme === 'dark' ? 'dark' : 'light')
+
+  $effect(() => {
+    document.documentElement.dataset.theme = theme
+    try {
+      localStorage.setItem('theme', theme)
+    } catch (e) {
+      // Private mode / storage disabled. The toggle still works for this tab.
+    }
   })
 
   // Your data. Swap for a fetch() in onMount, a store, or props.
@@ -36,26 +43,101 @@
   ]
 </script>
 
-<main style="max-width: 720px; margin: 3rem auto; font-family: system-ui, sans-serif;">
-  <h1 style="font-size: 1.4rem;">SvGrid</h1>
-  <p style="color:#64748b;">
-    Sort, filter, select, and double-click a cell to edit. Edit
-    <code>src/App.svelte</code> to make it yours.
-  </p>
+<main>
+  <header>
+    <div>
+      <h1>SvGrid</h1>
+      <p>
+        Sort, filter, select, and double-click a cell to edit. Edit
+        <code>src/App.svelte</code> to make it yours.
+      </p>
+    </div>
+    <button
+      type="button"
+      onclick={() => (theme = theme === 'dark' ? 'light' : 'dark')}
+      aria-label="Switch to {theme === 'dark' ? 'light' : 'dark'} mode"
+    >
+      {theme === 'dark' ? 'Light' : 'Dark'}
+    </button>
+  </header>
 
-  <div style="height: 320px;">
+  <div class="grid-shell">
     <SvGrid
       data={rows}
       {columns}
-      {features}
-      filterMode="menu"
+      sortable
+      filterable
+      editable
       selectionMode="row"
       showRowSelection={true}
       showRowNumbers={true}
-      enableInlineEditing={true}
       rowHeight={38}
       containerHeight="100%"
       fitColumns={true}
     />
   </div>
+
+  <p class="hint">
+    Theme: <code>src/app.css</code> imports one of 20 presets. Swap the id for
+    <code>material</code>, <code>nord</code>, <code>dracula</code>, and so on.
+  </p>
 </main>
+
+<style>
+  /* Chrome reads the same --sg-* tokens as the grid, so it re-themes with it. */
+  main {
+    max-width: 720px;
+    margin: 3rem auto;
+    padding: 0 1rem;
+  }
+
+  header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 1rem;
+  }
+
+  h1 {
+    margin: 0;
+    font-size: 1.4rem;
+  }
+
+  p {
+    color: var(--sg-muted);
+  }
+
+  code {
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 0.9em;
+  }
+
+  button {
+    flex: none;
+    padding: 0.4rem 0.8rem;
+    border: 1px solid var(--sg-border);
+    border-radius: var(--sg-radius, 6px);
+    background: var(--sg-bg-subtle, transparent);
+    color: var(--sg-fg);
+    font: inherit;
+    font-size: 0.85rem;
+    cursor: pointer;
+  }
+
+  button:hover {
+    background: var(--sg-row-hover-bg);
+  }
+
+  button:focus-visible {
+    outline: 2px solid var(--sg-accent);
+    outline-offset: 2px;
+  }
+
+  .grid-shell {
+    height: 320px;
+  }
+
+  .hint {
+    font-size: 0.85rem;
+  }
+</style>

package/templates/minimal/src/app.css

@@ -0,0 +1,36 @@
+/* ---------------------------------------------------------------------------
+ * Theme.
+ *
+ * @svgrid/grid ships 20 presets, each one a full light AND dark palette on the
+ * --sg-* custom properties: ember, shadcn, tailwind, material, fluent, carbon,
+ * antd, bootstrap, atlassian, salesforce, sap, github, linear, notion, vercel,
+ * excel, nord, dracula, catppuccin, ag-alpine.
+ *
+ * Swap the id below to re-theme the grid and this page together, or delete the
+ * import and declare the tokens yourself. The dark half of every preset hangs
+ * off <html data-theme="dark">, which the toggle in App.svelte writes.
+ *
+ * Token reference: https://svgrid.com/docs/getting-started/5-theme-and-density
+ * ------------------------------------------------------------------------- */
+/* svgrid-theme:start */
+@import '@svgrid/grid/themes/shadcn.css';
+/* svgrid-theme:end */
+
+/* Which way the page leans, so scrollbars, form controls and the canvas behind
+   the app follow the theme instead of staying stubbornly light. */
+:root {
+  color-scheme: light;
+}
+:root[data-theme='dark'] {
+  color-scheme: dark;
+}
+
+/* The page chrome reads the same tokens the grid does, so changing the preset
+   above moves the whole app, not just the table. */
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--sg-bg);
+  color: var(--sg-fg);
+  font-family: var(--sg-font, system-ui, sans-serif);
+}

package/templates/minimal/src/main.js

@@ -1,4 +1,5 @@
 import { mount } from 'svelte'
+import './app.css'
 import App from './App.svelte'
 
 const app = mount(App, { target: document.getElementById('app') })