Cross-Tab Sync

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

const runtime = createThemeRuntime({
  defaultTheme: "light",
  broadcast: createMultiWindowSync({ prefer: "auto" }),
});

3Why this works

createMultiWindowSync detects BroadcastChannel availability and falls back to SharedWorker or storage events as needed. This ensures theme sync works across all browsers, including incognito mode where BroadcastChannel may be blocked.

4Verify

• ✓The page loads with no console errors after the change.
• ✓The outcome holds: theme changes sync across all tabs
• ✓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.