@rokkit/app provides higher-level components for SvelteKit layouts: a theme mode
switcher and an on-page navigation component. Both integrate with @rokkit/states and @rokkit/actions internally.
ThemeSwitcherToggle
A compact toggle button for switching between system, light, and dark color modes. Reads and writes the vibe store from @rokkit/states — no props required for basic use:
Props:
| Prop | Type | Default | Description |
|---|---|---|---|
modes | ColorMode[] | ['system','light','dark'] | Which modes to include |
includeSystem | boolean | true | Shortcut to exclude system option |
showLabels | boolean | false | Show text labels alongside icons |
size | 'sm'|'md'|'lg' | 'sm' | Size variant |
icons | object | — | Override icon CSS classes per mode |
onchange | (mode) => void | — | Called when mode changes |
TableOfContents
Scans h2 and h3 headings inside a container element and renders an
on-page navigation list. Uses IntersectionObserver to highlight the active section.
In SvelteKit layouts, call rescan() after navigation to pick up headings from the new
page:
Props and methods:
| Name | Type | Description |
|---|---|---|
container | string | ID of the element to scan for headings (default: 'main-content') |
rescan() | method | Re-scan headings after content changes. Bind the component and call from afterNavigate. |
The rendered nav applies data-toc-active to the button matching the visible
heading, and data-toc-level for indent styling.
Related
- @rokkit/states —
vibestore that ThemeSwitcherToggle reads/writes - Theming Overview — Data attributes controlled by ThemeSwitcherToggle