ThemeScript

ThemeScript(props): Element

Defined in: packages/react/src/components/ui/ThemeScript.tsx:36

Blocking script that applies theme before hydration.

Must be rendered in the document <head> (before React hydrates). Reads from localStorage and applies .dark class synchronously before the first paint.

Framework integration:

Next.js app router: app/layout.tsx <head>
Next.js pages router: pages/_document.tsx <Head>
Remix: root.tsx <head>
Vite: index.html <head>

Parameters

props

Component props.

storageKey?

string = "vex-theme"

localStorage key (default: "vex-theme").

Returns

Element

A script tag that runs before React hydration.

Example

// Next.js app/layout.tsx
import { ThemeScript, ThemeProvider } from "@vexcms/react";

export default function RootLayout({ children }) {
  return (
    <html suppressHydrationWarning>
      <head>
        <ThemeScript />
      </head>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}