# CSS Variable Themer
> Color-pick every --sjv-* token or apply a Solarized, Dracula, or GitHub preset. Theming without swapping the style prop.
**Source:** [https://jsonview.svelte.page/examples/css-variables](https://jsonview.svelte.page/examples/css-variables)
**Markdown mirror:** [https://jsonview.svelte.page/examples/css-variables.md](https://jsonview.svelte.page/examples/css-variables.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: css variable themer.
Tune the --sjv-* theme tokens live without replacing the viewer style map.
**Metadata:** tag: `THEMING` | theme: `css variables` | preview: `live`
### Notes
- Every `--sjv-*` token maps to a color picker, so you can retheme punctuation, keys, and each value type independently.
- Named presets (Solarized, Dracula, GitHub) apply a full palette in one click as a starting point.
- Themes are pure CSS custom properties — no `style` prop swap and no rebuild, so the preview updates instantly.
### Source
#### CssVariableThemer.svelte
Source file: [src/lib/examples/css-variables/demos/CssVariableThemer.svelte](https://github.com/humanspeak/svelte-json-view-lite/blob/main/docs/src/lib/examples/css-variables/demos/CssVariableThemer.svelte)
```svelte