feat(design-system): ThemeProvider + useTheme — toggle dark/light (Sprint 0.5 étape 2)

src/app/providers.tsx

@@ -1,14 +1,39 @@
+import { useState, useEffect } from 'react'
 import { QueryClientProvider } from '@tanstack/react-query'
 import { BrowserRouter } from 'react-router-dom'
 import { queryClient } from '@/shared/lib/query-client'
+import {
+  ThemeContext,
+  type Theme,
+  getInitialTheme,
+  applyTheme,
+  persistTheme,
+} from '@/shared/lib/theme'
 import { AppRouter } from './router'
 
+function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setThemeState] = useState<Theme>(getInitialTheme)
+
+  useEffect(() => {
+    applyTheme(theme)
+    persistTheme(theme)
+  }, [theme])
+
+  function setTheme(t: Theme) {
+    setThemeState(t)
+  }
+
+  return <ThemeContext.Provider value={{ theme, setTheme }}>{children}</ThemeContext.Provider>
+}
+
 export function Providers() {
   return (
-    <QueryClientProvider client={queryClient}>
-      <BrowserRouter>
-        <AppRouter />
-      </BrowserRouter>
-    </QueryClientProvider>
+    <ThemeProvider>
+      <QueryClientProvider client={queryClient}>
+        <BrowserRouter>
+          <AppRouter />
+        </BrowserRouter>
+      </QueryClientProvider>
+    </ThemeProvider>
   )
 }