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
  • CSS variable theming: override --theme-hue-override or --layout-width-override in plain CSS
  • 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

Add the theme as a GitHub dependency along with its peer dependencies:

// package.json
{
  "dependencies": {
    "astro-pigment": "github:psd-coder/astro-pigment",
    "astro": "^6.0.0",
    "nanotags": "^0.14.0",
    "nanostores": "^1.0.0"
  }
}

Then install:

pnpm install

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",
      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
  hueSlider: true, // shows a color slider in the header
})

Drag the slider, pick a hue you like, then hardcode it in CSS and remove hueSlider:

:root {
  --theme-hue-override: 135; /* the value you picked */
}