Custom Branding — Sourcey

Sourcey defaults to a clean indigo theme. This guide walks through replacing it with your own brand identity. For the full reference of all theme options, see Themes & Layout and Theme Tokens.

Start with colors

The fastest way to make sourcey feel like your product. Three hex values control the entire color scheme.

Set your primary color

theme: {
  colors: {
    primary: "#0066cc",
  },
}

This single value drives links, active states, sidebar highlights, and accent elements. The light and dark variants default to the primary if not set.

Add light and dark variants

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

Rebuild

npx sourcey dev

Every accent in the site now uses your palette.

Add a logo

logo: "./assets/logo.png",

If your logo doesn't work on both light and dark backgrounds:

logo: {
  light: "./assets/logo.png",
  dark: "./assets/logo-dark.png",
  href: "/",
},

Warning

Colors must be valid 6-digit hex values. Shorthand like #f00 won't work; use #ff0000.

Change fonts

Override the sans-serif and monospace font stacks:

theme: {
  fonts: {
    sans: "Inter",
    mono: "JetBrains Mono",
  },
}

Sourcey automatically loads custom fonts from Google Fonts. Just set the name:

theme: {
  fonts: {
    sans: "Inter",
    mono: "JetBrains Mono",
  },
}

Sourcey generates the Google Fonts <link> tag and preconnect hints at build time. If your font isn't on Google Fonts, load it via a custom CSS file instead:

theme: {
  fonts: { sans: "My Custom Font" },
  css: ["./fonts.css"],
}

Add a favicon

favicon: "./assets/favicon.png",

Custom CSS overrides

For anything the config doesn't cover, inject a CSS file:

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

Sourcey's HTML uses semantic class names (.sidebar, .toc, .page-content, .callout, etc.) so you can target any element reliably. The custom CSS loads after the default theme, so your rules take precedence.

Full example

import { defineConfig } from "sourcey";

export default defineConfig({
  name: "Acme Docs",
  theme: {
    colors: {
      primary: "#0066cc",
      light: "#3399ff",
      dark: "#003d99",
    },
    fonts: {
      sans: "Inter",
      mono: "JetBrains Mono",
    },
    css: ["./brand.css"],
  },
  logo: {
    light: "./assets/logo.png",
    dark: "./assets/logo-dark.png",
    href: "/",
  },
  favicon: "./assets/favicon.png",
  navigation: { tabs: [/* ... */] },
});