Themes are still the easiest way to recolour a site. If you need a different layout structure (not just colours), check out the new Templates page — templates are layered on top of themes and ship their own EJS partials and CSS/JS bundles.
docmd provides a set of professionally designed, light/dark responsive themes. You can switch your entire site’s aesthetic by changing a single key in docmd.config.json.
<!-- SCREENSHOT: Gallery grid showing all available themes - each theme rendered as a small preview card with the theme name below. Show at least the default, minimal, and docs themes in both light and dark variants. -->
How to Switch Themes
{
"theme": {
"name": "sky",
"appearance": "system"
}
}
Built-in Theme Gallery
| Theme | Best For | Vibes |
|---|---|---|
default |
Low-profile docs | Clean, lightweight, neutral |
sky |
Product Docs | Modern, premium, standard-issue |
ruby |
Brand Identity | Sophisticated, serif headers, vibrant |
retro |
Dev Tools | 80s Terminals, monospace, neon accents |
1. default
The very theme used for this documentation site. Use this if you plan on adding extensive custom CSS and don’t want any built-in design layers interfering.
2. sky
A modern documentation look with crisp typography, subtle transitions, and high-contrast light/dark modes.
3. ruby
A serif-driven theme with a deep, jewel-toned palette. Good for documentation that needs to feel authoritative.
4. retro
A vintage-computing inspired theme with phosphor-green text on black backgrounds (dark mode), scanline effects, and monospace fonts (Fira Code by default).
The four values above (default, sky, ruby, retro) are the only reserved CSS theme names. Any other value in theme.name is auto-promoted to a template name (see Templates). If you want a CSS theme-like name on a template, set theme.template explicitly instead.
Theming Architecture
- CSS Layering: Themes are additive. Choosing
skyloads the basedefaultstyles and overlays theskypalette on top. - Dark mode: Every theme includes a built-in dark mode implementation.
- Live switching: When users switch themes via the UI, the SPA engine updates the relevant CSS variables without a page reload.
The CSS variable names differ slightly between themes (for example, --sky-primary only exists under sky). Mentioning your theme name when asking for help with custom CSS keeps suggestions accurate.
