Flash of wrong theme when deployed to Cloudflare Workers

I have a TanStack Start web app with theming applied using next-themes and when deployed to Vercel or to a VPS using Docker, the themes work correctly. However, when I deploy to Cloudflare workers and the selected theme is the dark theme, whenever I reload the page, there's a flash of the light theme, before the dark theme loads in. What am I doing wrong? Any idea how I can fix this?

function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <HeadContent />
      </head>

      <body>
        <ThemeProvider
          attribute={"class"}
          defaultTheme="system"
          disableTransitionOnChange
          enableSystem
        >
          <div className="relative bg-background text-neutral-700 antialiased dark:bg-foreground dark:text-neutral-300">
            {children}
          </div>
        </ThemeProvider>

        <Scripts />
      </body>
    </html>
  );
}

function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <HeadContent />
      </head>

      <body>
        <ThemeProvider
          attribute={"class"}
          defaultTheme="system"
          disableTransitionOnChange
          enableSystem
        >
          <div className="relative bg-background text-neutral-700 antialiased dark:bg-foreground dark:text-neutral-300">
            {children}
          </div>
        </ThemeProvider>

        <Scripts />
      </body>
    </html>
  );
}

TanStack•6mo ago•

4 replies

dramatic-maroon

Flash of wrong theme when deployed to Cloudflare Workers

function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <HeadContent />
      </head>

      <body>
        <ThemeProvider
          attribute={"class"}
          defaultTheme="system"
          disableTransitionOnChange
          enableSystem
        >
          <div className="relative bg-background text-neutral-700 antialiased dark:bg-foreground dark:text-neutral-300">
            {children}
          </div>
        </ThemeProvider>

        <Scripts />
      </body>
    </html>
  );
}

function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <HeadContent />
      </head>

      <body>
        <ThemeProvider
          attribute={"class"}
          defaultTheme="system"
          disableTransitionOnChange
          enableSystem
        >
          <div className="relative bg-background text-neutral-700 antialiased dark:bg-foreground dark:text-neutral-300">
            {children}
          </div>
        </ThemeProvider>

        <Scripts />
      </body>
    </html>
  );
}

Flash of wrong theme when deployed to Cloudflare Workers

Similar Threads

Flash of wrong theme when deployed to Cloudflare Workers

Similar Threads

Similar Threads

Similar Threads