Theming

Dory uses the default Clidey Design theme from @clidey/ux. It provides the Paper and Ink surfaces, Signal Blue actions, and light and dark modes. Add dory.json overrides to match your product's visual identity.

Global stylesheets#

Register site-wide CSS once in dory.json:

"styles": ["./custom.css"]

Paths are relative to the documentation content directory: next to your MDX pages, or inside docs/ when your project has a nested documentation folder. For example, a root dory.json with docs/introduction.mdx uses docs/custom.css for the configuration above.

Dory loads the files in array order after its default styles. They apply to every page, including direct visits to nested routes and iframe widgets that load the built site. You do not need CSS imports in individual MDX pages. CSS entry files and every imported stylesheet or referenced asset must stay within the documentation directory and must not use symlinks. Remote URLs, absolute paths, SVG assets, and arbitrary file types are rejected. Supported assets are raster images and fonts. dory check, builds, and dev-server CSS updates validate these dependencies. Graph size, total bytes, and import depth are bounded.

Use Dory's theme variables and root .dark class for theme-aware rules:

.product-example {
  color: var(--foreground);
  background: var(--background);
}

.dark .product-example {
  border-color: var(--border);
}

Vite processes validated CSS imports and referenced assets, and updates stylesheet edits in the dev server. Changing the configured list reloads the site. Global styles also work when a basePath is configured. App-owned sandbox runtimes use a separate, validated stylesheet payload; see sandboxed runtime styles.

Color Configuration#

Brand Colors

"colors": {
  "primary": "#6366f1",
  "light": "#818cf8",
  "dark": "#4f46e5"
}

Extended Colors

For deeper customization, you can control the entire page palette:

"colors": {
  "primary": "#F1BF4F",
  "light": "#F1BF4F",
  "dark": "#F1BF4F",
  "background": "#1a1a2e",
  "surface": "#242440",
  "surfaceElevated": "#2e2e4a",
  "foreground": "#f5f5f7",
  "mutedForeground": "#a0a0b0",
  "border": "rgba(255, 255, 255, 0.1)",
  "accent": "#60a5fa"
}

Theme Mode#

Force your docs into dark or light mode regardless of the user's OS preference:

"theme": {
  "mode": "dark",
  "radius": "0.5rem"
}

Typography#

Control heading, body, and code fonts independently:

"fonts": {
  "family": "Inter Tight",
  "source": "https://fonts.gstatic.com/s/intertight/v7/...",
  "format": "woff2",
  "heading": {
    "family": "Fraunces",
    "source": "https://fonts.gstatic.com/s/fraunces/v31/...",
    "format": "woff2",
    "weight": "300 900"
  },
  "mono": {
    "family": "JetBrains Mono",
    "source": "https://fonts.gstatic.com/s/jetbrainsmono/v18/...",
    "format": "woff2"
  }
}

Dark Mode#

Dory automatically follows the user's OS/browser dark mode preference. No configuration required — it works out of the box.

The light and dark color fields let you fine-tune how your brand color appears on light and dark backgrounds respectively.

Color Palettes#

Some well-tested palettes: