Themes

Folio separates theme behavior from theme design.

The engine provides the default documentation layout and navigation theme. Your project's CSS owns the visual tokens, colors, typography, and other design decisions. This keeps the documentation engine reusable and lets each site use its own design system.

Theme configuration

Use docs.config.ts for runtime theme behavior:

export default {
  theme: {
    defaultMode: "system",
  },
};

defaultMode accepts "light", "dark", or "system". It is only the initial mode. A preference already saved by the visitor takes precedence.

In this section

• Colors and CSS
• Custom themes