Theme

The theme field in docs.json controls the colors and dark mode of your site. The navbar field adds external links to the top bar.

Presets

Four presets ship with Bloques. Set one with the preset field.

• default — neutral grays.
• ocean — cool blues.
• emerald — fresh greens.
• rose — warm pinks.

{
  "theme": {
    "preset": "ocean"
  }
}

Each preset defines a full light and dark palette. The dark palette is paired automatically — set the preset once and both modes work.

Primary color override

Replace a preset's primary color with primaryOverride. The value applies to both light and dark mode.

{
  "theme": {
    "preset": "default",
    "primaryOverride": "#10b981"
  }
}

primaryOverride accepts any valid CSS color: hex, rgb(), hsl(), oklch(), or a named color. Pick a value with enough contrast against white text — the primary color is used as a background for primary buttons.

Dark mode

Every preset ships with a paired dark palette, so dark mode works out of the box. The site renders a theme switch in the header with three options: Light, Dark, and System. The default is System, which follows the visitor's operating system preference.

Navbar links

The navbar array adds external links to the top bar. Each entry takes a name and a url.

{
  "navbar": [
    { "name": "Dashboard", "url": "https://bloques.app" },
    { "name": "GitHub", "url": "https://github.com/your-org/your-repo" }
  ]
}

Navbar links open in a new tab.

Next