Theme

Your site's look lives under theme in docs.json: theme.name picks a layout theme, and theme.colors brands it. Colors apply the same way in every theme, in both light and dark mode.

Layout themes

Set theme.name to switch the site's layout. It defaults to reef, so existing sites don't change:

{
  "theme": {
    "name": "harbour",
    "colors": { "primary": "#0033A9" }
  }
}

• reef — the classic documentation layout: product banners on the landing page, sidebar navigation, and section tabs. The default.
• harbour — a help-center layout: a centered landing page with a prominent search bar, Ask AI entry, and category cards, plus breadcrumbs above every article. Articles keep the full docs chrome.

Harbour options

Harbour looks finished with no extra configuration, but you can tune the landing page under theme.harbour:

{
  "theme": {
    "name": "harbour",
    "colors": { "primary": "#0033A9" },
    "harbour": {
      "heroTitle": "How can we help?",
      "heroSubtitle": "Find answers, guides, and support for Acme.",
      "popularSearches": ["billing", "webhooks", "refunds"],
      "suggested": ["/payments/guides/quickstart", "/payments/guides/webhooks"]
    }
  }
}

• heroTitle / heroSubtitle — override the landing headline and subline.
• popularSearches — up to six short terms shown as chips under the search bar; each opens search. Omit to hide the row.
• suggested — up to four doc paths pinned as "Suggested articles" cards at the bottom of the landing page. Omit to hide the section.

Brand color

primary is the only required color. Everything else has a sensible default:

{
  "theme": {
    "colors": { "primary": "#0033A9" }
  }
}

Light & dark

Override the brand color per mode when the primary doesn't have enough contrast on a dark (or light) background:

{
  "theme": {
    "colors": {
      "primary": "#0033A9",
      "light": "#4D7CFF",
      "dark": "#0033A9"
    }
  }
}

• light is used for emphasis in dark mode.
• dark is used for buttons and hover states.

Both fall back to primary if you omit them.

Accent colors

Provide up to four accent colors, used for section accents across the site:

{
  "theme": {
    "colors": {
      "primary": "#0033A9",
      "accents": ["#F97316", "#10B981", "#8B5CF6", "#EC4899"]
    }
  }
}

Status colors

Callouts (Note, Tip, Warning, Check, and errors) use status colors. Override any of them to match your brand:

{
  "theme": {
    "colors": {
      "primary": "#0033A9",
      "status": {
        "info": "#2563EB",
        "warning": "#D97706",
        "error": "#DC2626",
        "success": "#16A34A",
        "idea": "#7C3AED"
      }
    }
  }
}