Framer doesn't ship a built-in, automatic dark mode switch the way some site builders do. What it has is the building blocks to construct one yourself — and once it's built, it behaves like any other piece of interactive Framer design when you convert the site.
How dark mode actually gets built in Framer
The common approach uses Framer's Variables and Effects together: define a color Variable (or a set of them) for your palette, wire a toggle component to flip that Variable's value between a light and dark set, and reference the Variable everywhere in your design instead of hardcoding colors. Framer's own components respect prefers-color-scheme in some contexts, but a genuinely user-controlled, persisted toggle (the kind that remembers your choice across visits) is typically built with a Variable plus a small amount of Framer's code override, since "remember this across sessions" isn't a built-in primitive.
The result, when it's built this way, is a real interactive component: a click handler that swaps CSS custom properties, running in the browser via Framer's own runtime.
What happens to it after conversion
This matters differently depending on which mode you use:
- Pure Next.js mode keeps Framer's runtime fully intact, so a working dark-mode toggle keeps working exactly as it did on Framer — the click handler, the Variable swap, and (if you built it that way) the persisted preference all survive, because nothing about the interaction logic is touched.
- Hybrid mode strips Framer's JS runtime for performance, which means any interaction that depends on Framer's own JavaScript executing — including a Variable-driven dark mode toggle — stops working after conversion, the same way any other click-triggered Framer interaction would. What Hybrid mode restores automatically is appear and scroll animations specifically (rebuilt as lightweight CSS), not arbitrary click-driven state toggles like a theme switcher.
If dark mode is central to the site, Pure Next.js is the mode that keeps it working without extra effort. If you're on Hybrid mode and need dark mode to survive, the toggle needs to be rebuilt as a small amount of vanilla JS (a click handler that toggles a class or CSS variables) in the exported code — a few dozen lines, not a rewrite, but real work rather than something conversion does for you.
The CSS-only alternative
If you haven't built dark mode in Framer yet and know you're planning to export eventually, there's a simpler path: instead of a JS-driven toggle, use a pure CSS prefers-color-scheme media query to set your color variables based on the visitor's OS setting. This has no click-to-toggle control (it follows the system setting only), but it needs zero JavaScript to work — meaning it survives Hybrid mode's runtime stripping automatically, with nothing to rebuild.
See the Hybrid vs Pure Next.js breakdown for the full picture on what does and doesn't need Framer's runtime to keep working.