From d8e55e85a1e1505b85ad199155643032fc84d7b8 Mon Sep 17 00:00:00 2001
From: Dmytro Stanchiev <git@dmytros.dev>
Date: Wed, 20 Aug 2025 11:26:42 -0400
Subject: [PATCH] 'fix' hydration error by rendering on the client

---
 src/components/mode-toggle.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/mode-toggle.tsx b/src/components/mode-toggle.tsx
index dfb230b..d6504c9 100644
--- a/src/components/mode-toggle.tsx
+++ b/src/components/mode-toggle.tsx
@@ -17,6 +17,17 @@ type ThemeIconProps = {
 }
 
 const ThemeIcon = ({ theme }: ThemeIconProps) => {
+
+  const [mounted, setMounted] = React.useState(false)
+
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return null
+  }
+
   switch (theme) {
     case "light":
       return (
@@ -28,7 +39,7 @@ const ThemeIcon = ({ theme }: ThemeIconProps) => {
       )
     case "system":
       return (
-        <Monitor className="absolute h-[1.2rem] w-[1.2rem] scale-100 transition-all" />
+        <Monitor className="absolute h-[1.2rem] w-[1.2rem] scale-100" />
       )
     default:
       return (<>