Theme Toggle

How it works

The toggle lives in the top-right of the navbar (and next to the hamburger menu on mobile). Clicking it cycles through:

Persistence per site

The visitor's choice is saved in localStorage scoped to the current hostname. That means:

• A visitor's preference on docs.stripe-like-company.com does not bleed into docs.other-customer.com — each tenant has its own isolated preference.

• Same user visiting the CodivDocs dashboard at app.codivdocs.com has a separate preference there (the dashboard uses its own token namespace data-app-theme).

Default theme

Set the first-paint default in your codiv.config.json:

{
  "appearance": {
    "default": "dark"
  }
}

Valid values: "light", "dark", "system" (default).

The configured default is what new visitors see on their very first page load, before they touch the toggle. Once they pick, their choice persists across visits via localStorage.

Custom colors per theme

Both themes share the same design tokens but resolve to different values. You can override them in your config:

{
  "colors": {
    "primary": "#3B82F6"
  }
}

Primary color applies to both light and dark variants. In Phase 2 you will be able to specify separate light/dark values for every token (primary, accent, background, border) directly from the dashboard theme editor.