Appearance

These docs.json keys control how your site looks. All of them are optional.

Appearance#

The appearance key sets the initial theme mode.

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

• default: "system" (default), "light", or "dark". "system" follows the visitor's OS preference.
• strict: hide the light/dark toggle and ignore stored preferences, locking the site to the default mode.

Colors#

{
  "colors": {
    "primary": "#16a34a",
    "light": "#4ade80",
    "dark": "#15803d"
  }
}

• primary: semantic primary color in light mode
• light: semantic primary color in dark mode (defaults to primary)
• dark: fallback accent used when primary is omitted

Fonts#

The fonts key replaces the default typefaces. Google Fonts families load automatically; self-hosted fonts need source (and optionally format).

{
  "fonts": {
    "family": "Open Sans",
    "heading": { "family": "Playfair Display", "weight": 700 },
    "body": { "family": "Hubot Sans", "source": "/fonts/Hubot-Sans.woff2", "format": "woff2" }
  }
}

The top-level family applies everywhere; heading and body override it for their part of the page.

Eyebrows#

The styling.eyebrows key controls the label above page titles: "section" (default) shows the group name, "breadcrumbs" shows the navigation path.

{
  "styling": { "eyebrows": "breadcrumbs" }
}

Code blocks#

The styling.codeBlocks key sets defaults for fenced code blocks. theme takes any bundled Shiki theme name per color mode, and lineNumbers turns on line numbers everywhere (individual blocks can opt out with hideLineNumbers).

{
  "styling": {
    "codeBlocks": {
      "lineNumbers": true,
      "theme": { "light": "github-light", "dark": "github-dark" }
    }
  }
}

Restart the dev server after changing the theme so already-compiled pages pick it up. See Code for the per-block syntax.

Background#

The background key sets a custom page background per mode. image can also be a single path used in both modes.

{
  "background": {
    "color": { "light": "#ffffff", "dark": "#0a0a0f" },
    "image": { "light": "/bg.png", "dark": "/bg-dark.png" }
  }
}