T
TanStack•3mo ago
fascinating-indigo

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>
  );
}
4 Replies
genetic-orange
genetic-orange•3mo ago
You can try my fork of next-themes here: https://github.com/anchortags/react-theming It is not published, so you will have to copy the files from the next-themes/src directory to your own repo for now and import the ThemeProvider from there. LMK if it works for you
GitHub
GitHub - anchortags/react-theming: Fork of next-themes for Tanstack...
Fork of next-themes for Tanstack Start/Router. Support System preference and any other theme with no flashing - anchortags/react-theming
fascinating-indigo
fascinating-indigoOP•3mo ago
It worked! Thank you so much!
genetic-orange
genetic-orange•3mo ago
Okay great, I am glad to hear that. I will clean up this repo soon and publish it to NPM. Could help others too
fascinating-indigo
fascinating-indigoOP•3mo ago
Alright. Starred the repo so I can check regularly to see when it gets published. Thank you.

Did you find this page helpful?