Theming
Choose a built-in theme — Jam, Nebula, or Pulsar — to control typography, layout, spacing, and dark mode. Override colors to match your brand.
Set theme in docs.json to control layout, typography, spacing, and dark mode behavior. Three themes are available: jam (default), nebula, and pulsar.
{
"theme": "jam"
}Available Themes
The default theme. Header-logo layout with a radial gradient background derived from your primary color. Rounded borders (6-24px).
{
"theme": "jam"
}Typography
Each theme bundles fonts loaded from Google Fonts:
| Theme | Headings | Body | Code |
|---|---|---|---|
| Jam | Inter | Inter | JetBrains Mono |
| Nebula | IBM Plex Mono | IBM Plex Mono | IBM Plex Mono |
| Pulsar | Inter | Inter | JetBrains Mono |
We recommend the defaults — they're tuned to each theme. If you need a different look, set fonts in docs.json to swap the entire site to a Google Font:
{
"fonts": {
"family": "Lora"
}
}Use separate fonts for headings and body:
{
"fonts": {
"heading": { "family": "Space Grotesk" },
"body": { "family": "Inter" }
}
}Any Google Font works — set just family and the build fetches it automatically. To self-host a custom font, add source (URL or /-relative path) and format:
{
"fonts": {
"family": "AcmeSans",
"source": "/fonts/acme-sans.woff2",
"format": "woff2"
}
}For anything beyond the fonts field — overriding code fonts, tweaking weights per heading level, or loading non-Google webfonts — see Custom CSS.
Custom Colors
Override the default palette to match your brand identity:
{
"theme": "jam",
"colors": {
"primary": "#635BFF",
"light": "#7C75FF",
"dark": "#4F46E5"
}
}| Color | Usage |
|---|---|
primary | Links, buttons, accents |
light | Hover states, highlights |
dark | Active states, dark mode accents |
Colors take effect after your next build. In local development, restart the dev server to see changes.
Use a color tool like Coolors or Realtime Colors to generate a harmonious palette.
Need more than colors? Custom CSS lets you override fonts, spacing, content width, border radii, callout styles, and component-level details. Themes set the defaults; Custom CSS is the escape hatch for anything CSS can touch.
Dark Mode
All themes include dark mode. By default Jamdesk follows the user's system preference and offers a toggle in the navbar. Your color palette adapts automatically.
Pin the site to a specific mode with appearance in docs.json:
{
"appearance": {
"default": "dark",
"strict": true
}
}| Field | Values | Default | Description |
|---|---|---|---|
default | "system" | "light" | "dark" | "system" | Initial mode for first-time visitors |
strict | boolean | false | When true, hides the navbar toggle so visitors stay on default |
Set default alone to suggest a starting mode while still letting users switch. Add strict: true to remove the toggle entirely and lock the site to that mode.
To test dark mode during development, use the navbar toggle or emulate it in DevTools:
- Open DevTools
- Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows)
- Search for "Emulate CSS prefers-color-scheme: dark"
For fine-grained control over dark mode styles, use Custom CSS.