From 7c68fb81e3cb847a46424434d9c5efad8b9b93ec Mon Sep 17 00:00:00 2001
From: Froidefond Julien <julienfroidefond@gmail.com>
Date: Thu, 26 Feb 2026 11:16:31 +0100
Subject: [PATCH] fix: prevent ThemeToggle hydration mismatch by deferring icon
 render

Server doesn't know localStorage theme, so defer emoji rendering until
after mount to avoid server/client text mismatch.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/layout/ThemeToggle.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/layout/ThemeToggle.tsx b/src/components/layout/ThemeToggle.tsx
index 615a5e5..39da47b 100644
--- a/src/components/layout/ThemeToggle.tsx
+++ b/src/components/layout/ThemeToggle.tsx
@@ -1,9 +1,15 @@
 'use client';
 
 import { useTheme } from '@/contexts/ThemeContext';
+import { useState, useEffect } from 'react';
 
 export function ThemeToggle() {
   const { theme, toggleTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
   return (
     <button
@@ -11,7 +17,7 @@ export function ThemeToggle() {
       className="flex h-9 w-9 items-center justify-center rounded-lg border border-border bg-card text-lg transition-colors hover:bg-card-hover"
       aria-label="Toggle theme"
     >
-      {theme === 'light' ? '🌙' : '☀️'}
+      {mounted ? (theme === 'light' ? '🌙' : '☀️') : <span className="h-5 w-5" />}
     </button>
   );
 }