Theme Transitions

1Install

Pick your package manager — the command updates to match.

pnpm add @themvora/core

Using a framework? Its adapter is a separate package — see the framework guides for the provider setup, then come back for the pattern.

2Implement

Drop this into your project. It is the whole pattern — no other setup is required.

import { createThemeRuntime } from "@themvora/core";

const runtime = createThemeRuntime({
  defaultTheme: "light",
  transition: {
    enabled: true,
    preset: "smooth",
    duration: 360,
    easing: "cubic-bezier(0.4, 0, 0.2, 1)",
  },
});

3Why this works

The transition option enables CSS transition animations when themes change. The preset can be "smooth" (default easing) or "none". You can also provide your own easing function. Note: Transitions are disabled by default. Enable them explicitly when you want animated theme switches.

4Verify

• ✓The page loads with no console errors after the change.
• ✓The outcome holds: smooth animated theme transitions
• ✓Toggling the theme in your app still works, and the state survives a reload if persistence is configured.
• ✓Reduced-motion users see no animation if you enabled transitions.