#Flash of wrong theme when deployed to Cloudflare Workers

4 messages · Page 1 of 1 (latest)

keen flame
#

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>
  );
}
pastel pollen
keen flame
pastel pollen
#

Okay great, I am glad to hear that. I will clean up this repo soon and publish it to NPM. Could help others too