SSR integrations (Next.js, Nuxt, Remix, Astro, Angular) resolve the persisted theme on the server and emit the blocking bootstrap themselves — zero setup. Client providers (React, Vue, Svelte, Solid) are now also flash-proof with zero setup: they read the persisted selection, apply the theme before first paint via a layout effect, and inject a blocking bootstrap script. There is no vite plugin or manual <head> script to wire.

One provider, zero overhead

You don't need the vite plugin or a manual createThemeBootstrapScript call anymore — the provider handles it. The plugin remains available if you want the theme applied on the absolute first frame before the bundle even loads.

2The mechanism

Every provider does the same three things on mount, synchronously before the browser paints:

Reads the persisted selection (theme-selection).
Injects a blocking <script> into <head> that resolves the family + effective mode and writes the CSS variables + attributes.
Creates the DOM + CSS-variable bindings, which apply the same theme.

Hydration matches the pre-paint markup, so there is no flash and no mismatch.

3Framework snippets

main.tsx

tsx

1import { StrictMode } from "react";
2import { createRoot } from "react-dom/client";
3import { ThemeProvider } from "@theme-kit/react";
4
5// Flash-proof out of the box. The provider reads the persisted selection
6// (localStorage "theme-selection"), applies it before first paint, and
7// injects a blocking bootstrap script — no vite plugin or manual <head>
8// script required.
9createRoot(document.getElementById("root")!).render(
10  <StrictMode>
11    <ThemeProvider themes={themes} defaultTheme="light" initialMode="system">
12      <App />
13    </ThemeProvider>
14  </StrictMode>,
15);
16

4When you still want the bootstrap script

The providers apply the theme before the first paint of the application content. If you want the theme applied on the very first frame — before the JavaScript bundle even loads — add the Vite plugin (build-time, zero runtime cost) or inline createThemeBootstrapScript output into index.html. This is optional and only matters for slower bundles.