Theming

Everything in the GraphStaff theme lives in docs.json. Set the brand color, preset, appearance, fonts, styling, and logo variants there; no custom CSS is required.

Colors

colors.primary drives the derived OKLCH color ramps used across the site. Use colors.light and colors.dark when you want to override the accent color in one mode without changing the full ramp.

docs.json

{
  "colors": {
    "primary": "#4f46e5",
    "light": "#0f766e",
    "dark": "#5eead4"
  }
}

Presets

Preset	Character
default	Balanced defaults for most documentation sites.
minimal	Flat and editorial, with restrained chrome.
soft	Rounded and friendly, with gentler surfaces.
bold	High-contrast and brand-forward.

Live preset preview

DefaultMinimalSoftBold

Preset sample

GraphStaff docs

Surfaces, navigation states, shadows, radius, and chrome respond to the selected preset.

SurfaceChromeAccent

This preview applies to this visit only. Set it permanently with "theme" in docs.json. The bold preview is approximate because the higher-chroma primary ramp is generated only when bold is configured in docs.json.

Set a preset permanently with the top-level theme field:

docs.json

{
  "theme": "soft"
}

Appearance

appearance.default chooses the first mode: "light", "dark", or "system". Set appearance.strict to true to pin one mode and hide the theme toggle.

docs.json

{
  "appearance": {
    "default": "dark",
    "strict": true
  }
}

Fonts

Use a string for a Google Fonts family. Use the object form when you need source: "system" or explicit weights. Family names are normalized and validated before the site builds.

docs.json

{
  "fonts": {
    "body": "Inter",
    "heading": {
      "family": "Inter",
      "source": "google",
      "weights": [500, 600, 700]
    },
    "mono": {
      "family": "JetBrains Mono",
      "source": "system",
      "weights": [400, 500]
    }
  }
}

Styling overrides

styling.radius overrides the preset radius scale. styling.accentStrength controls how strongly accent color appears in navigation and chrome.

docs.json

{
  "styling": {
    "radius": "medium",
    "accentStrength": "medium"
  }
}

Logo and dark mode

Logos load as <img> elements, so SVGs that rely on currentColor render black in dark mode. Ship light and dark logo variants instead.

docs.json

{
  "logo": {
    "light": "/src/assets/logo.svg",
    "dark": "/src/assets/logo-dark.svg"
  }
}