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 |
Custom font support is coming soon. Themes currently use the stacks above with system font fallbacks.
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.
Dark Mode
All themes include dark mode. Jamdesk follows the user's system preference and provides a toggle in the navbar. Your color palette adapts automatically.
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.