Persistent Dark Mode

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,
  createPersistencePlugin,
} from "@themvora/core";

const runtime = createThemeRuntime({
  defaultTheme: "light",
  plugins: [createPersistencePlugin({ key: "my-app-theme" })],
});

3Why this works

The createPersistencePlugin connects the theme store to browser storage. By default it uses localStorage, but you can configure it to use cookies for SSR accessibility. Important considerations: - The storage key should be unique to your app - In incognito/private browsing modes, storage may be cleared on close - For SSR environments, prefer cookie-based persistence

4Verify

• ✓The page loads with no console errors after the change.
• ✓The outcome holds: theme selection persists across sessions
• ✓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.