Theme

Everything visual about your site lives under the theme field in docs.json.

{
  "theme": {
    "preset": "neutral",
    "colors": { "primary": "#2563EB" },
    "darkMode": true,
    "breadcrumb": true,
    "lastUpdated": true
  }
}

Presets

preset picks a built-in color scheme for the entire site. It sets sensible defaults for backgrounds, borders, and accents — you can still override colors.primary on top.

{
  "theme": {
    "preset": "neutral"
  }
}

cmdocs ships with 11 presets. Click any preview to zoom in.

neutral

The default. A clean grayscale palette that adapts to any brand color.

{ "theme": { "preset": "neutral" } }

black

Pure monochrome — maximum contrast, no color tint.

{ "theme": { "preset": "black" } }

vitepress

Mirrors the Vitepress look-and-feel. Familiar to anyone who's used Vitepress before.

{ "theme": { "preset": "vitepress" } }

dusk

A soft purple-tinted dark palette. Easy on the eyes for long reading sessions.

{ "theme": { "preset": "dusk" } }

catppuccin

The popular Catppuccin pastel palette. A favorite of developer-tool docs.

{ "theme": { "preset": "catppuccin" } }

ocean

Cool blue tones. Great for infrastructure, networking, and SaaS products.

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

purple

Vibrant purple accents. Pairs well with creative tools and design systems.

{ "theme": { "preset": "purple" } }

solar

Warm yellows and oranges. Energetic and confident.

{ "theme": { "preset": "solar" } }

emerald

Fresh green accents. Growth, sustainability, fintech.

{ "theme": { "preset": "emerald" } }

ruby

Bold red and pink. Marketing-led and brand-forward.

{ "theme": { "preset": "ruby" } }

aspen

Earthy, organic tones. Suits outdoor, lifestyle, and slow-tech brands.

{ "theme": { "preset": "aspen" } }

Colors

Override the brand color used for links, active sidebar items, buttons, and accents.

{
  "theme": {
    "colors": {
      "primary": "#2563EB",
      "light": "#3B82F6",
      "dark": "#1D4ED8"
    }
  }
}

Dark mode

Dark mode is enabled by default. Users can toggle it from the navbar, and the choice respects their system preference.

{
  "theme": {
    "darkMode": true
  }
}

Set darkMode: false to lock the site to light mode.

Layout

Choose between two page layouts:

{
  "theme": {
    "layout": "docs"
  }
}

Custom layout width

Override the maximum content width:

{
  "theme": {
    "layoutWidth": "1400px"
  }
}

Sidebar

Control how the sidebar behaves:

{
  "theme": {
    "sidebar": {
      "collapsible": true,
      "defaultOpenLevel": 0,
      "tabs": true
    }
  }
}

Table of contents

The TOC appears on the right side of every page, generated from your headings.

{
  "theme": {
    "toc": {
      "enabled": true,
      "style": "normal"
    }
  }
}

To hide the TOC for a single page, set full: true in that page's frontmatter.

Page chrome

Two on/off toggles for what appears around your content:

{
  "theme": {
    "breadcrumb": true,
    "lastUpdated": true
  }
}

Full example

{
  "theme": {
    "preset": "neutral",
    "colors": {
      "primary": "#2563EB"
    },
    "darkMode": true,
    "layout": "docs",
    "breadcrumb": true,
    "lastUpdated": true,
    "sidebar": {
      "collapsible": true,
      "defaultOpenLevel": 0,
      "tabs": true
    },
    "toc": {
      "enabled": true,
      "style": "normal"
    }
  }
}