Correction du mismatch hydratation dans le fichier themetoggle

Author: Lory578

components/ThemeToggle.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 
 type Theme = 'light' | 'dark'
 
@@ -11,19 +11,21 @@ interface Props {
   darkLabel: string
 }
 
-function detectTheme(): Theme {
-  if (typeof window === 'undefined') return 'light'
-  const saved = window.localStorage.getItem(THEME_KEY)
-  if (saved === 'light' || saved === 'dark') return saved
-  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-}
-
 function applyTheme(theme: Theme) {
   document.documentElement.classList.toggle('dark', theme === 'dark')
 }
 
 export default function ThemeToggle({ lightLabel, darkLabel }: Props) {
-  const [theme, setTheme] = useState<Theme>(() => detectTheme())
+  const [theme, setTheme] = useState<Theme | null>(null)
+
+  useEffect(() => {
+    const timer = window.setTimeout(() => {
+      const fromDom = document.documentElement.classList.contains('dark') ? 'dark' : 'light'
+      setTheme(fromDom)
+    }, 0)
+
+    return () => window.clearTimeout(timer)
+  }, [])
 
   function updateTheme(nextTheme: Theme) {
     setTheme(nextTheme)