Appearance

Theme mode#

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" }
}

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" }
  }
}

Back to Configuration overview.