Zero Flash

No Flash SSR

SPA client providers (React, Vue, Svelte, Solid) are flash-proof out of the box — no vite plugin or manual head script required.

1How it works

Each client provider reads the persisted theme selection, applies the theme before first paint via a layout effect, and injects a blocking bootstrap script into <head>. The result is zero flash with zero configuration. See the /zero-flash page for the full mechanism and SSR integrations.

2Framework snippets

main.tsx

TSX

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { ThemeProvider } from "@themvora/react";

// Flash-proof out of the box. The provider reads the persisted selection
// (localStorage "theme-selection"), applies it before first paint, and
// injects a blocking bootstrap script — no vite plugin or manual <head>
// script required.
createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <ThemeProvider defaultTheme="light" initialMode="system">
      <App />
    </ThemeProvider>
  </StrictMode>,
);

If you want the theme applied on the very first frame before the bundle loads, see the bootstrap script mechanism and the Vite plugin.