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 and theme.saturation 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" },
      meta: { 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 theme colors (optional)

Temporarily enable the theme picker to dial in hue and saturation for your site:

docsTheme({
  // ...your config
  themePicker: true, // shows a hue + saturation picker on the page
});

Drag the hue ring and saturation slider, pick values you like, then set them in config and remove themePicker:

docsTheme({
  // ...your config
  theme: { hue: 135, saturation: 70 }, // the values you picked
});
Theme copied