From a0c8984cd667c90df47c5602ff7dc06e7d7af83f Mon Sep 17 00:00:00 2001 From: SamSyntax Date: Sat, 1 Nov 2025 12:41:20 +0100 Subject: [PATCH 1/4] Fix hydration error from the main layout.tsx --- apps/web/src/app/layout.tsx | 6 +++--- apps/web/src/components/theme-provider.tsx | 21 +++++++++++++++++++++ 2 files changed, 24 insertions(+), 3 deletions(-) create mode 100644 apps/web/src/components/theme-provider.tsx diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx index 7e32ea22d..16a5a64e1 100644 --- a/apps/web/src/app/layout.tsx +++ b/apps/web/src/app/layout.tsx @@ -1,4 +1,3 @@ -import { ThemeProvider } from "next-themes"; import { Analytics } from "@vercel/analytics/react"; import Script from "next/script"; import "./globals.css"; @@ -10,6 +9,7 @@ import { baseMetaData } from "./metadata"; import { defaultFont } from "../lib/font-config"; import { BotIdClient } from "botid/client"; import { env } from "@/env"; +import CustomThemeProvider from "@/components/theme-provider"; export const metadata = baseMetaData; @@ -35,7 +35,7 @@ export default function RootLayout({ - + {children} @@ -55,7 +55,7 @@ export default function RootLayout({ data-track-sessions={false} /> - + ); diff --git a/apps/web/src/components/theme-provider.tsx b/apps/web/src/components/theme-provider.tsx new file mode 100644 index 000000000..eee5a033f --- /dev/null +++ b/apps/web/src/components/theme-provider.tsx @@ -0,0 +1,21 @@ +"use client" + +import { ThemeProvider, ThemeProviderProps } from "next-themes"; +import { useEffect, useState } from "react" + +interface CustomThemeProviderProps extends ThemeProviderProps { + children: React.ReactNode; +} + +export default function CustomThemeProvider({ children, ...props }: CustomThemeProviderProps) { + const [mounted, setMounted] = useState(false); + useEffect(() => { + setMounted(true); + }, []); + + if (!mounted) { + return <>{children}; + } + + return {children} +} From b4570450ccb4e440bdb75e764c8e6c6e40b0ddd6 Mon Sep 17 00:00:00 2001 From: SamSyntax Date: Sat, 1 Nov 2025 12:41:54 +0100 Subject: [PATCH 2/4] Add conditional icon change for theme toggle --- apps/web/src/components/theme-toggle.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/web/src/components/theme-toggle.tsx b/apps/web/src/components/theme-toggle.tsx index 8302a19c6..ed295d6c4 100644 --- a/apps/web/src/components/theme-toggle.tsx +++ b/apps/web/src/components/theme-toggle.tsx @@ -18,7 +18,9 @@ export function ThemeToggle({ className }: ThemeToggleProps) { className="h-7" onClick={() => setTheme(theme === "dark" ? "light" : "dark")} > - + {theme === "dark" ? ( + + ) : ()} {theme === "dark" ? "Light" : "Dark"} ); From e78e9e344981924a627285ea9bad3cd74ca0225d Mon Sep 17 00:00:00 2001 From: SamSyntax <95968905+SamSyntax@users.noreply.github.com> Date: Sat, 1 Nov 2025 19:52:30 +0100 Subject: [PATCH 3/4] Update theme-toggle.tsx Fix typo in classname --- apps/web/src/components/theme-toggle.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/web/src/components/theme-toggle.tsx b/apps/web/src/components/theme-toggle.tsx index ed295d6c4..0626e74c0 100644 --- a/apps/web/src/components/theme-toggle.tsx +++ b/apps/web/src/components/theme-toggle.tsx @@ -19,9 +19,10 @@ export function ThemeToggle({ className }: ThemeToggleProps) { onClick={() => setTheme(theme === "dark" ? "light" : "dark")} > {theme === "dark" ? ( - + ) : ()} {theme === "dark" ? "Light" : "Dark"} ); } + From f8bfbbb335ec4b7fd699c2a6936eca794f13a42b Mon Sep 17 00:00:00 2001 From: SamSyntax <95968905+SamSyntax@users.noreply.github.com> Date: Sat, 8 Nov 2025 19:12:19 +0100 Subject: [PATCH 4/4] Update theme-toggle.tsx --- apps/web/src/components/theme-toggle.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/web/src/components/theme-toggle.tsx b/apps/web/src/components/theme-toggle.tsx index 0626e74c0..fe3b4cd87 100644 --- a/apps/web/src/components/theme-toggle.tsx +++ b/apps/web/src/components/theme-toggle.tsx @@ -19,10 +19,11 @@ export function ThemeToggle({ className }: ThemeToggleProps) { onClick={() => setTheme(theme === "dark" ? "light" : "dark")} > {theme === "dark" ? ( - - ) : ()} + + ) : ()} {theme === "dark" ? "Light" : "Dark"} ); } +