Multi-Window Sync

One theme across every tab

When a user changes the theme in one tab, every other open tab should reflect the change instantly. Themvora provides adapters that handle cross-tab synchronization with automatic fallbacks — no manual localStorage listener wiring required.

Prerequisites

Core Package

@themvora/core

Runtime

Active ThemeRuntime with persistence adapter

Browser API

BroadcastChannel (with fallbacks for older browsers)

1The Problem

Each browser tab runs its own runtime instance — without synchronization the selections drift apart.

Each tab creates its own ThemeRuntime with independent state. A theme switch in tab A does not propagate to tab B.
The persistence adapter stores the selection in localStorage, but reading it only happens at bootstrap — tabs opened after a change get the right theme, but tabs already open stay stale.
Users expect consistency: switching to dark mode in one tab should darken all tabs. Without sync they see a jarring split where half the UI is dark and half is light.
Race conditions are possible if multiple tabs write to storage simultaneously — the sync adapters serialize updates through a single channel.

2BroadcastChannel

BroadcastChannel is the default transport — messages reach every same-origin tab without touching the DOM.

createMultiWindowSync tries BroadcastChannel first. If the browser supports it (all modern browsers do), every .post() call is broadcast to all other tabs on the same origin that have subscribed to the same channel name.

core — BroadcastChannel (default adapter)

TS / JS

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

const sync = createMultiWindowSync({
  prefer: "auto", // "broadcast" | "sharedworker" | "auto"
  onFallback(strategy) {
    console.warn("Falling back:", strategy);
  },
});

// Every tab receives the update
sync.subscribe((selection) => {
  console.log("Theme changed in another tab:", selection);
});

// Post a change — all other tabs update instantly
sync.post({ mode: "dark", family: "graphite" });

Channel name defaults to "theme-selection" | Pass { channelName: 'admin' } to isolate scopes — see Custom Channels below.

If you need the raw broadcast adapter without the auto-fallback logic, use createThemeSelectionBroadcast directly:

core — createThemeSelectionBroadcast directly

TS / JS

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

const channel = createThemeSelectionBroadcast({
  channelName: "my-app-theme",
});

if (channel) {
  channel.post({ mode: "dark", family: "graphite" });

  channel.subscribe((state) => {
    // state.family and state.mode are both available
    applyTheme(state);
  });
}

3StorageEvent Fallback

For environments where BroadcastChannel is blocked (some WebView contexts, older browsers), a localStorage-based fallback keeps everything in sync.

When BroadcastChannel is unavailable, Themvora falls back to writing the selection to localStorage and listening for the browser's native storage event. This event fires in every other tab whenever localStorage is modified — effectively giving you cross-tab messaging through the storage API.

core — StorageEvent fallback

TS / JS

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

// Uses localStorage "storage" event to sync across tabs
// Works in all browsers, no BroadcastChannel needed
const sync = createStorageEventSync("theme-selection-state");

sync.post({ mode: "dark", family: "graphite" });

sync.subscribe((selection) => {
  // Fires in other tabs when localStorage changes
  runtime.selection.setMode(selection.mode);
  runtime.selection.setFamily(selection.family);
});

StorageEvent only fires in other tabs | The writing tab does not receive its own storage event. The sync adapter applies the change locally when .post() is called, before writing to storage.

4Cross-Tab Persistence

localStorage is the persistence layer — the sync adapters react to storage changes and push updates into the runtime.

Persistence and sync work together but solve different problems:

Persistence vs. Sync

PersistenceSurvives page reload — reads from localStorage at bootstrap

SyncPropagates changes while the app is running — reacts to storage events or BroadcastChannel messages

TogetherA theme change is written to storage (persistence) and broadcast to other tabs (sync) in the same tick

The ThemeSelectionState object contains both mode (light/dark/system) and family (the color palette). Both values are synchronized — switching palettes in one tab switches palettes in every tab.

5Setup in Every Framework

A thin hook or composable wraps the adapter lifecycle — mount creates, unmount destroys.

The pattern is the same across frameworks: create the sync adapter on mount, subscribe to incoming changes, and clean up on unmount.

React — useMultiWindowSync hook

TSX / JSX

import { useEffect } from "react";
import { createMultiWindowSync } from "@themvora/core";

export function useMultiWindowSync(runtime) {
  useEffect(() => {
    const sync = createMultiWindowSync();

    const unsub = sync.subscribe((selection) => {
      runtime.selection.setMode(selection.mode);
  runtime.selection.setFamily(selection.family);
    });

    return () => {
      unsub();
      sync.destroy();
    };
  }, [runtime]);
}

Vue — composable

TS / JS

import { onMounted, onUnmounted } from "vue";
import { createMultiWindowSync } from "@themvora/core";

export function useMultiWindowSync(runtime) {
  let sync;
  let unsub;

  onMounted(() => {
    sync = createMultiWindowSync();
    unsub = sync.subscribe((selection) => {
      runtime.selection.setMode(selection.mode);
  runtime.selection.setFamily(selection.family);
    });
  });

  onUnmounted(() => {
    unsub?.();
    sync?.destroy();
  });
}

Svelte — onMount action

TS / JS

import { onMount, onDestroy } from "svelte";
import { createMultiWindowSync } from "@themvora/core";

export function syncTheme(runtime) {
  let sync;
  let unsub;

  onMount(() => {
    sync = createMultiWindowSync();
    unsub = sync.subscribe((selection) => {
      runtime.selection.setMode(selection.mode);
  runtime.selection.setFamily(selection.family);
    });
  });

  onDestroy(() => {
    unsub?.();
    sync?.destroy();
  });
}

SharedWorker is also an option | If you set { prefer: 'sharedworker' }, the adapter uses a SharedWorker instead of BroadcastChannel. Useful in contexts where BroadcastChannel messages are throttled.

6Custom Channels

Different channel names create isolated sync scopes — admin and storefront can maintain independent theme selections.

By default all tabs share the theme-selection channel. If your app has multiple independently-themed regions (admin panel, embedded widget, storefront), give each one a unique channel name. Messages on different channels never cross.

core — isolated channel names

TS / JS

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

// Two separate scopes — admin panel vs. storefront
const adminSync = createMultiWindowSync({
  channelName: "admin-theme",
});

const storeSync = createMultiWindowSync({
  channelName: "storefront-theme",
});

// Changing admin theme does NOT affect storefront tabs
adminSync.post({ mode: "dark", family: "graphite" });
storeSync.post({ mode: "light", family: "default" });

Accessibility

Focus rings, reduced-motion, and color-scheme sync.

→

Persistence

localStorage adapters that survive page reload.

→

Zero Flash

How the first paint already matches the user.

→

One theme across every tab

Prerequisites

Core Package

@themvora/core

Runtime

Active ThemeRuntime with persistence adapter

Browser API

BroadcastChannel (with fallbacks for older browsers)

1The Problem

Each browser tab runs its own runtime instance — without synchronization the selections drift apart.

Each tab creates its own ThemeRuntime with independent state. A theme switch in tab A does not propagate to tab B.
The persistence adapter stores the selection in localStorage, but reading it only happens at bootstrap — tabs opened after a change get the right theme, but tabs already open stay stale.
Users expect consistency: switching to dark mode in one tab should darken all tabs. Without sync they see a jarring split where half the UI is dark and half is light.
Race conditions are possible if multiple tabs write to storage simultaneously — the sync adapters serialize updates through a single channel.

2BroadcastChannel

BroadcastChannel is the default transport — messages reach every same-origin tab without touching the DOM.

core — BroadcastChannel (default adapter)

TS / JS

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

const sync = createMultiWindowSync({
  prefer: "auto", // "broadcast" | "sharedworker" | "auto"
  onFallback(strategy) {
    console.warn("Falling back:", strategy);
  },
});

// Every tab receives the update
sync.subscribe((selection) => {
  console.log("Theme changed in another tab:", selection);
});

// Post a change — all other tabs update instantly
sync.post({ mode: "dark", family: "graphite" });

Channel name defaults to "theme-selection" | Pass { channelName: 'admin' } to isolate scopes — see Custom Channels below.

If you need the raw broadcast adapter without the auto-fallback logic, use createThemeSelectionBroadcast directly:

core — createThemeSelectionBroadcast directly

TS / JS

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

const channel = createThemeSelectionBroadcast({
  channelName: "my-app-theme",
});

if (channel) {
  channel.post({ mode: "dark", family: "graphite" });

  channel.subscribe((state) => {
    // state.family and state.mode are both available
    applyTheme(state);
  });
}

3StorageEvent Fallback

For environments where BroadcastChannel is blocked (some WebView contexts, older browsers), a localStorage-based fallback keeps everything in sync.

core — StorageEvent fallback

TS / JS

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

// Uses localStorage "storage" event to sync across tabs
// Works in all browsers, no BroadcastChannel needed
const sync = createStorageEventSync("theme-selection-state");

sync.post({ mode: "dark", family: "graphite" });

sync.subscribe((selection) => {
  // Fires in other tabs when localStorage changes
  runtime.selection.setMode(selection.mode);
  runtime.selection.setFamily(selection.family);
});

StorageEvent only fires in other tabs | The writing tab does not receive its own storage event. The sync adapter applies the change locally when .post() is called, before writing to storage.

4Cross-Tab Persistence

localStorage is the persistence layer — the sync adapters react to storage changes and push updates into the runtime.

Persistence and sync work together but solve different problems:

Persistence vs. Sync

PersistenceSurvives page reload — reads from localStorage at bootstrap

SyncPropagates changes while the app is running — reacts to storage events or BroadcastChannel messages

TogetherA theme change is written to storage (persistence) and broadcast to other tabs (sync) in the same tick

5Setup in Every Framework

A thin hook or composable wraps the adapter lifecycle — mount creates, unmount destroys.

The pattern is the same across frameworks: create the sync adapter on mount, subscribe to incoming changes, and clean up on unmount.

React — useMultiWindowSync hook

TSX / JSX

import { useEffect } from "react";
import { createMultiWindowSync } from "@themvora/core";

export function useMultiWindowSync(runtime) {
  useEffect(() => {
    const sync = createMultiWindowSync();

    const unsub = sync.subscribe((selection) => {
      runtime.selection.setMode(selection.mode);
  runtime.selection.setFamily(selection.family);
    });

    return () => {
      unsub();
      sync.destroy();
    };
  }, [runtime]);
}

Vue — composable

TS / JS

import { onMounted, onUnmounted } from "vue";
import { createMultiWindowSync } from "@themvora/core";

export function useMultiWindowSync(runtime) {
  let sync;
  let unsub;

  onMounted(() => {
    sync = createMultiWindowSync();
    unsub = sync.subscribe((selection) => {
      runtime.selection.setMode(selection.mode);
  runtime.selection.setFamily(selection.family);
    });
  });

  onUnmounted(() => {
    unsub?.();
    sync?.destroy();
  });
}

Svelte — onMount action

TS / JS

import { onMount, onDestroy } from "svelte";
import { createMultiWindowSync } from "@themvora/core";

export function syncTheme(runtime) {
  let sync;
  let unsub;

  onMount(() => {
    sync = createMultiWindowSync();
    unsub = sync.subscribe((selection) => {
      runtime.selection.setMode(selection.mode);
  runtime.selection.setFamily(selection.family);
    });
  });

  onDestroy(() => {
    unsub?.();
    sync?.destroy();
  });
}

6Custom Channels

Different channel names create isolated sync scopes — admin and storefront can maintain independent theme selections.

core — isolated channel names

TS / JS

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

// Two separate scopes — admin panel vs. storefront
const adminSync = createMultiWindowSync({
  channelName: "admin-theme",
});

const storeSync = createMultiWindowSync({
  channelName: "storefront-theme",
});

// Changing admin theme does NOT affect storefront tabs
adminSync.post({ mode: "dark", family: "graphite" });
storeSync.post({ mode: "light", family: "default" });