From 0f5e3ea56a107129c33dc100df7fc062f334bbf4 Mon Sep 17 00:00:00 2001
From: Xevion <xevion@xevion.dev>
Date: Thu, 23 Oct 2025 01:06:55 -0500
Subject: [PATCH] fix: prevent theme flashing with Cloudflare Rocket Loader

Add data-cfasync attribute to next-themes script injection to disable
Cloudflare Rocket Loader for the theme script, preventing FOUC (flash
of unstyled content) when the page loads.
---
 src/pages/_app.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index bc3d5b6..206827b 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,6 +1,6 @@
-import { type AppType } from "next/dist/shared/lib/utils";
-import { ThemeProvider } from "next-themes";
 import { Theme } from "@radix-ui/themes";
+import { ThemeProvider } from "next-themes";
+import { type AppType } from "next/dist/shared/lib/utils";
 
 import "@fontsource-variable/inter";
 import "@fontsource/ibm-plex-mono/400.css";
@@ -10,7 +10,12 @@ import "@/styles/globals.css";
 
 const MyApp: AppType = ({ Component, pageProps }) => {
 	return (
-		<ThemeProvider attribute="class" defaultTheme="system">
+		<ThemeProvider
+			attribute="class"
+			defaultTheme="system"
+			// Cloudflare Rocket Loader breaks the script injection and causes theme flashing
+			scriptProps={{ "data-cfasync": "false" }}
+		>
 			<Theme accentColor="indigo" grayColor="slate" radius="medium" scaling="100%">
 				<Component {...pageProps} />
 			</Theme>