first dark mode fix

apps/frontend/app/(website)/page.tsx

@@ -4,6 +4,7 @@ import { resolveSanityRouteMetadata } from "@/data/sanity/resolveSanityRouteMeta
 import type { RouteProps } from "@/types";
 import type { ResolvingMetadata } from "next";
 
+import { ThemeProvider } from "@/app/context";
 import dynamic from "next/dynamic";
 import { draftMode } from "next/headers";
 import { notFound } from "next/navigation";
@@ -30,9 +31,9 @@ export default async function IndexRoute() {
 	const pathname = `/`;
 	const initial = await loadModularPage(pathname);
 
-	if (draftMode().isEnabled) {
-		return <PagePreview initial={initial} />;
-	}
-
-	return <Page data={initial.data!} />;
+	return draftMode().isEnabled ? (
+		<PagePreview initial={initial} />
+	) : (
+		<Page data={initial.data!} />
+	);
 }

apps/frontend/app/(website)/studio/main/5PaneSetup.tsx

@@ -2,7 +2,7 @@ import ChevronRightSVG from "@/assets/icons/chevronright.svg";
 import { cn } from "@/utils";
 import { SignInButton, useAuth } from "@clerk/nextjs";
 import type { KnownEngines } from "@codemod-com/utilities";
-import { useTheme } from "@context/themeContext";
+import { useTheme } from "@context/useTheme";
 import getAccessToken from "@studio/api/getAccessToken";
 import { getCodeDiff } from "@studio/api/getCodeDiff";
 import Panel from "@studio/components/Panel";

apps/frontend/app/(website)/studio/main/Header.tsx

@@ -1,6 +1,6 @@
 import AuthButtons from "@auth/AuthButtons";
 import type { KnownEngines } from "@codemod-com/utilities";
-import { useTheme } from "@context/themeContext";
+import { useTheme } from "@context/useTheme";
 import { Backspace as BackspaceIcon } from "@phosphor-icons/react";
 import { Link as LinkIcon } from "@phosphor-icons/react";
 import { Button } from "@studio/components/ui/button";

apps/frontend/app/(website)/studio/page.tsx

@@ -1,12 +1,13 @@
 "use client";
 
+import { ThemeProvider } from "@context/useTheme";
 import { MainPage } from "@studio/main/index";
 import { Toaster } from "react-hot-toast";
 import { Tooltip } from "react-tooltip";
 
 export default function Page() {
 	return (
-		<>
+		<ThemeProvider>
 			<MainPage />
 			<Tooltip
 				className="z-50 w-40 bg-gray-light text-center text-xs text-gray-text-dark-title dark:bg-gray-lighter dark:text-gray-text-title "
@@ -15,7 +16,7 @@ export default function Page() {
 				id="button-tooltip"
 			/>
 			<Toaster />
-		</>
+		</ThemeProvider>
 	);
 }
 

apps/frontend/app/(website)/studio/src/components/Snippet/Monaco.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from "@context/themeContext";
+import { useTheme } from "@context/useTheme";
 import Editor, { type EditorProps, type Monaco } from "@monaco-editor/react";
 import type { monaco } from "@studio/customMonaco";
 import type { OffsetRange } from "@studio/schemata/offsetRangeSchemata";

apps/frontend/app/(website)/studio/src/components/Snippet/MonacoDiffEditor.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from "@context/themeContext";
+import { useTheme } from "@context/useTheme";
 import { DiffEditor, type DiffEditorProps } from "@monaco-editor/react";
 import type { monaco } from "@studio/customMonaco";
 import type { VisibilityOptions } from "@studio/types/options";

apps/frontend/app/(website)/studio/src/components/chatbot/ChatMessage.tsx

@@ -1,6 +1,6 @@
 import CompanyLogoSVG from "@/assets/icons/company_logo.svg";
 import { cn } from "@/utils";
-import { useTheme } from "@context/themeContext";
+import { useTheme } from "@context/useTheme";
 // Inspired by Chatbot-UI and modified to fit the needs of this project
 // @see https://github.com/mckaywrigley/chatbot-ui/blob/main/components/Chat/ChatMessage.tsx
 import { CaretDown, CaretRight, User as UserIcon } from "@phosphor-icons/react";

apps/frontend/app/(website)/studio/src/components/chatbot/CodeBlock.tsx

@@ -2,7 +2,7 @@
 // @see https://github.com/mckaywrigley/chatbot-ui/blob/main/components/Markdown/CodeBlock.tsx
 
 import { cn } from "@/utils";
-import { useTheme } from "@context/themeContext";
+import { useTheme } from "@context/useTheme";
 import { Check as CheckIcon, Copy as CopyIcon } from "@phosphor-icons/react";
 import { Button } from "@studio/components/ui/button";
 import { useCopyToClipboard } from "@studio/hooks/useCopyToClipboard";

apps/frontend/app/(website)/studio/src/components/chatbot/ModelSelector.tsx

@@ -1,5 +1,5 @@
 import { cn } from "@/utils";
-import { useTheme } from "@context/themeContext";
+import { useTheme } from "@context/useTheme";
 import {
 	Select,
 	SelectContent,

apps/frontend/app/context/index.ts

@@ -1,2 +1,2 @@
 export * from "./AuthProvider";
-export * from "./themeContext";
+export * from "./useTheme";

apps/frontend/app/context/themeContext.tsx → apps/frontend/app/context/useTheme.tsx

@@ -10,7 +10,7 @@ import {
 	useState,
 } from "react";
 
-const ThemeContext = createContext<{
+const UseTheme = createContext<{
 	isDark: boolean | null;
 	toggleTheme: () => void;
 }>({
@@ -51,15 +51,15 @@ const ThemeProvider = ({ children }: { children: ReactNode }) => {
 	}, [setDarkTheme, isDark]);
 
 	return (
-		<ThemeContext.Provider value={{ isDark, toggleTheme }}>
+		<UseTheme.Provider value={{ isDark, toggleTheme }}>
 			{children}
-		</ThemeContext.Provider>
+		</UseTheme.Provider>
 	);
 };
 
 const isBrowserSchemeDark = () =>
 	window.matchMedia?.("(prefers-color-scheme: dark)").matches;
 
-const useTheme = () => useContext(ThemeContext);
+const useTheme = () => useContext(UseTheme);
 
 export { ThemeProvider, useTheme };

apps/frontend/app/layout.tsx

@@ -39,12 +39,10 @@ export default async function RootLayout({
 					type="text/css"
 				/>
 			</head>
-			<body>
+			<body id="root">
 				<AuthProvider>
-					<ThemeProvider>
-						{children}
-						<Analytics />
-					</ThemeProvider>
+					{children}
+					<Analytics />
 				</AuthProvider>
 			</body>
 		</html>

apps/frontend/hooks/useTheme.tsx

@@ -1,11 +1,29 @@
+import { useEffect, useState } from "react";
+
 export type Theme = "light" | "dark";
 
 export const useTheme = () => {
+	const [theme, _setTheme] = useState<Theme>();
+	const oppositeTheme = theme === "light" ? "dark" : "light";
+
+	useEffect(() => {
+		if (theme) {
+			document.documentElement.classList.remove("light", "dark");
+			document.documentElement.classList.add(theme);
+		} else {
+			_setTheme((localStorage.getItem("theme") as Theme) || "light");
+			return;
+		}
+	}, [theme]);
 	const setTheme = (newTheme: Theme, store = false): void => {
-		document.documentElement.classList.remove("light", "dark");
-		document.documentElement.classList.add(newTheme);
+		_setTheme(newTheme);
 		store ? localStorage.setItem("theme", newTheme) : null;
 	};
 
-	return { setTheme };
+	return {
+		setTheme,
+		theme,
+		isDark: theme === "dark",
+		toggleTheme: () => setTheme(oppositeTheme),
+	};
 };

packages/codemods/react/19/remove-context-provider/README.md

@@ -7,9 +7,9 @@ function App() {
   const [theme, setTheme] = useState('light');
   // ...
   return (
-    <ThemeContext.Provider value={theme}>
+    <UseTheme.Provider value={theme}>
       <Page />
-    </ThemeContext.Provider>
+    </UseTheme.Provider>
   );
 }
 ```
@@ -21,9 +21,9 @@ function App() {
   const [theme, setTheme] = useState('light');
   // ...
   return (
-    <ThemeContext value={theme}>
+    <UseTheme value={theme}>
       <Page />
-    </ThemeContext>
+    </UseTheme>
   );
 }
 ```

packages/codemods/react/19/use-context-hook/README.md

@@ -4,16 +4,16 @@ This codemod will convert the usage of `useContext` to the new hook format, intr
 
 ```tsx
 import { useContext } from "react";
-import ThemeContext from "./ThemeContext";
+import UseTheme from "./UseTheme";
 
-const theme = useContext(ThemeContext);
+const theme = useContext(UseTheme);
 ```
 
 ## After:
 
 ```tsx
 import { use } from "react";
-import ThemeContext from "./ThemeContext";
+import UseTheme from "./UseTheme";
 
-const theme = use(ThemeContext);
+const theme = use(UseTheme);
 ```