Skip to main content

Overview

An Astro 6 documentation theme with dark mode, interactive playgrounds, and SEO endpoints. One integration call gives you a complete docs site: layout, navigation, table of contents, code highlighting, LLM-friendly endpoints, and a library of interactive components.

  • Single integration: rehype plugins, PostCSS, Shiki themes, sitemap, and SEO routes configured automatically
  • Dark mode: three-state toggle (auto/light/dark) with View Transitions, no FOUC
  • Theming: set theme.hue in config; all colors derive via OKLch
  • Interactive playgrounds: CodeMirror editor + sandboxed live preview with console capture
  • LLM endpoints: /llms.txt and /llms-full.txt auto-generated from your markdown content
  • Bundled fonts: Martian Grotesk + Martian Mono auto-injected (opt out with fonts: false)
  • Accessible: roving focus, ARIA attributes, keyboard navigation throughout
  • Zero build step: Astro resolves .astro/.ts source directly from the package

Installation

Install the theme along with its peer dependencies:

pnpm add astro-pigment astro nanotags nanostores

Quick Start

1. Configure the integration

// astro.config.mjs
import { defineConfig } from "astro/config";
import docsTheme from "astro-pigment";

export default defineConfig({
  integrations: [
    docsTheme({
      project: {
        name: "my-project",
        description: "A short description of your project",
        license: {
          name: "MIT",
          url: "https://github.com/your-name/your-repo/blob/main/LICENSE",
        },
        github: { user: "your-name", repository: "your-repo" },
      },
      author: { name: "Your Name", url: "https://x.com/your_handle" },
      icon: "src/assets/icon.svg",
      docs: {
        navLinks: [
          { href: "/", label: "Overview" },
          { href: "/api", label: "API" },
        ],
      },
    }),
  ],
});

2. Wire up the content collection

// src/content.config.ts
import { defineDocsCollections } from "astro-pigment/content";

export const collections = defineDocsCollections();

Drop .md/.mdx files into src/content/docs/. The integration injects /[...slug] automatically — pages render with the layout, TOC, prev/next navigation, and edit-on-github link out of the box. To render pages yourself, set docs.renderDefaultPage: false and create your own src/pages/[...slug].astro (reuse getDocsStaticPaths from astro-pigment/utils/content to skip the boilerplate).

Dark mode, sticky header, sidebar + mobile TOC, code copy buttons, favicons, webmanifest, sitemap, LLM endpoints, and footer are all wired up automatically.

3. Pick a theme hue (optional)

Temporarily enable the hue slider to find the right color for your site:

docsTheme({
  // ...your config
  huePicker: true, // shows a hue picker in the header
});

Drag the slider, pick a hue you like, then set it in config and remove huePicker:

docsTheme({
  // ...your config
  theme: { hue: 135 }, // the value you picked
});