Theme

The theme field in docs.json controls the colors and dark mode of your rendered site.

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 (and focus ring) color with primaryOverride. The value applies to both light and dark mode.

{
  "theme": {
    "preset": "default",
    "primaryOverride": "oklch(0.62 0.19 145)"
  }
}

primaryOverride accepts any valid CSS color: hex (#10b981), rgb(), hsl(), oklch(), or a named color. The string is written verbatim into the site's CSS, so 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.

Next