Theming
Design tokens, the neutral palette, and dark mode.
Design tokens
All colors are defined as CSS variables in app/globals.css and exposed to Tailwind through the @theme inline block. The palette is deliberately quiet: near-black text on white in light mode, a true dark surface in dark mode, and a single amber accent reserved for badges and highlights.
| Token | Usage |
|---|---|
--background / --foreground | Page surface and primary text. |
--muted / --muted-foreground | Subtle surfaces and secondary text. |
--border | Hairline borders that structure the layout. |
--highlight | Amber accent for badges like New in the sidebar. |
--success | Status indicators and confirmations. |
Inline links stay in the foreground color with a dotted underline — they read as part of the text until you hover, when the underline turns solid.
Dark mode
Theming is handled by next-themes with the class strategy. The toggle in the top bar switches between light and dark, defaulting to your system preference. Override any token inside the .dark block:
.dark {
--background: oklch(0.13 0 0);
--foreground: oklch(0.96 0 0);
--highlight: oklch(0.79 0.14 70);
}Code blocks stay dark in both themes — a near-black panel keeps snippets legible against a white page.
Typography
The template uses Geist Sans for UI and body text and Geist Mono for code, loaded locally from the geist package — no network fetch at build time. Headings use medium weight with tight tracking; doc content is styled by the .docs-prose class rather than a plugin, so every rule is visible and editable in globals.css.