Themes & Layout — Sourcey

Sourcey ships with three layout presets. Each preset defines the page structure; colors, fonts, and dimensions are customizable on top of any preset.

Presets

Sidebar navigation on the left, content in the center, table of contents on the right. The standard layout for documentation sites with many pages.

theme: {
  preset: "default", // this is the default; you can omit it
}

Single-column layout with no sidebar or table of contents. Content is centered and reads like a document. Good for single-page docs or READMEs.

theme: {
  preset: "minimal",
}

Three-column layout inspired by Stripe's API docs. Sidebar on the left, documentation in the center, code samples pinned to the right. Best for API-heavy sites.

theme: {
  preset: "api-first",
}

Colors

Three color values control the theme. Only primary is required; light and dark default to the primary value if not set.

theme: {
  colors: {
    primary: "#0066cc",    // links, active states, accent elements
    light: "#3399ff",      // hover states, lighter accents
    dark: "#003d99",       // active/pressed states
  },
}

Colors must be 6-digit hex values. Sourcey converts them to RGB for use in CSS custom properties.

Fonts

Override the default font stacks for sans-serif and monospace text.

theme: {
  fonts: {
    sans: "Inter",        // body text, headings
    mono: "JetBrains Mono", // code blocks, inline code
  },
}

Defaults:

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

Tip

Sourcey automatically loads custom fonts from Google Fonts. Set the font name in your config and it handles the <link> tag and preconnect hints.

Layout dimensions

Control the width of the sidebar, table of contents, and content area. Values are CSS length strings.

theme: {
  layout: {
    sidebar: "18rem",   // default: "18rem"
    toc: "19rem",       // default: "19rem"
    content: "44rem",   // default: "44rem"
  },
}

Custom CSS

Inject additional CSS files that load after the default theme. Paths are relative to sourcey.config.ts.

theme: {
  css: ["./custom.css"],
}

This is the escape hatch for styling that the config doesn't cover. Sourcey's HTML uses semantic class names, so you can target any element reliably.

For the full type definitions and default values, see the Theme Tokens reference. For a step-by-step branding walkthrough, see Custom Branding.