Theme Tokens — Sourcey

The theme field in sourcey.config.ts controls the visual appearance of your documentation site. Every token has a sensible default; you only need to set what you want to change.

ThemeConfig interface

interface ThemeConfig {
  preset?: "default" | "minimal" | "api-first";
  colors?: {
    primary: string;
    light?: string;
    dark?: string;
  };
  fonts?: {
    sans?: string;
    mono?: string;
  };
  layout?: {
    sidebar?: string;
    toc?: string;
    content?: string;
  };
  css?: string[];
}

Preset defaults

Sidebar + content + table of contents. The standard documentation layout.

Token	Value
`layout.sidebar`	`"18rem"`
`layout.toc`	`"19rem"`
`layout.content`	`"44rem"`

Single-column, centered content. No sidebar, no table of contents.

Token	Value
`layout.sidebar`	N/A
`layout.toc`	N/A
`layout.content`	`"44rem"`

Three-column layout with code samples pinned to the right.

Token	Value
`layout.sidebar`	`"18rem"`
`layout.toc`	N/A
`layout.content`	`"44rem"`

Color tokens

Token	Default	Usage
`primary`	`#6366f1` (indigo)	Links, active sidebar items, accent borders, focus rings
`light`	Same as primary	Hover states, lighter accent backgrounds
`dark`	Same as primary	Pressed/active states, darker accent elements

Colors must be 6-digit hex values. Sourcey converts them to space-separated RGB values for CSS custom properties, enabling opacity modifiers.

Font stacks

Token	Default
`sans`	`'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif`
`mono`	`'Geist Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace`

When you set a custom font name, sourcey uses it as the first entry in the stack with the system fallbacks appended.

CSS overrides

The css array accepts paths to CSS files loaded after the default theme:

theme: {
  css: ["./overrides.css", "./syntax.css"],
}

Paths are relative to sourcey.config.ts. Files are concatenated in order.