The theming runtime for modern applications.
Semantic tokens, theme families, SSR-safe hydration, smooth transitions, scoped themes, and adapters — a runtime designed to stay out of your way.
npm install @themvora/core @themvora/<your-framework>React · Next.js · Vue · Nuxt · Svelte · Solid · Angular · Astro · Remix · Web ComponentsBuild themes from the terminal with themvora generate → Read CLI docs →Palette — click to switch live; use the top-nav toggle for light/dark
Try changing the theme, and see the code reflect it live
import { createThemeRuntime } from "@themvora/core";
// Applied on this page right now: themvora-default-light
const runtime = createThemeRuntime();
runtime.selection.setFamily("themvora"); // swap the palette
runtime.selection.setMode("light"); // swap light/darkFive primitives, one system
Everything else in Themvora builds on these five ideas. They're orientation, not the whole story.
Semantic themes
Define meaning, not individual components — colors, radius, spacing and typography are named tokens.
Theme families
Palette and mode switch independently — mint-light, mint-dark, plum-light, plum-dark, all from one API.
SSR + zero-flash
The server resolves the persisted theme before first paint. No flicker, no hydration mismatch.
Runtime transitions
Theme change → token diff → transition plan → animated DOM update, driven by the runtime.
Adapters
Themvora gives your component library a theme runtime — it doesn't replace it.
Works everywhere
One runtime. Native integrations. Shared semantics. Pick your framework — the concepts stay the same, only the wiring changes.
Every integration shares the same core runtime and semantic contract. See the framework guides →
SSR integrations
The theme survives a hard reload. The server resolves it, a blocking script applies it before paint, and the runtime takes over after hydration — the same lifecycle on both frameworks because both share the core runtime.
<html>, inline CSS variables, blocking script) and the client takeover are identical. Learn how on the zero-flash page.A runtime, not a toggle
Every feature below is real — implemented in @themvora/core and exposed natively by each framework adapter. Click through to see the actual API.
Sunrise & sunset scheduling
Switch light/dark at each visitor's local sunrise and sunset. NOAA solar math in core, exposed through a reactive controller in every framework.
Explore →Scoped themes
Isolate a subtree — a video player, an embedded widget, legacy DOM — with ThemeScope, the themvora-scope element, or an imperative binding.
Explore →Theme-aware scrollbar
Replace the native scrollbar with a theme-colored overlay — same physics, no layout shift, no flash. Ships in core with wrappers for every framework.
Explore →Bring your existing UI system
Themvora doesn't replace your component library. It gives your component library a theme runtime. Two adapter classes cover the ecosystem.
The adapter writes the active theme's tokens as a live :root stylesheet. Your components keep consuming CSS variables — nothing re-renders when the theme changes.
The adapter rebuilds the library's native theme object (MUI Theme, Chakra system, Ant Design config) whenever the runtime theme changes, then hands it to the library's own provider.
Ship every theme that ships with the library
Built-in preset families and brand palettes, all themeable with one click. Click a card to apply it to this entire site — live, no reload.
Not a random sidebar — a path
The docs are sequenced the way you actually learn: grasp the mental model, play with a live runtime, put it in your app, go deeper.
Start in three lines
Wrap your app, call a hook, ship. Themvora handles persistence, cookies, SSR hydration, and zero-flash bootstrapping for you — in any framework.
Full getting-started guide →import { ThemeProvider } from "@themvora/next";
export default function RootLayout({ children }) {
return <ThemeProvider defaultTheme="light">{children}</ThemeProvider>
};