Add dark theme switch

Implement a dark theme toggle using ThemeToggle component with next-themes integration. Integrate ThemeToggle into Header for mobile/desktop, replace inline block, and ensure header imports updated. Also remove redundant static theme UI in settings area.

X-Lovable-Edit-ID: edt-033eb8f8-761d-448e-88bc-1d63491a02d1

src/components/Header.tsx

@@ -10,6 +10,7 @@ import { useAuth } from '@/hooks/useAuth';
 import { useSuperUser } from '@/hooks/useSuperUser';
 import { useIsMobile } from '@/hooks/use-mobile';
 import CategoryFilter from '@/components/CategoryFilter';
+import ThemeToggle from '@/components/ThemeToggle';
 import { NewsItem, NewsCategory } from '@/types/news';
 
 interface HeaderProps {
@@ -128,6 +129,8 @@ const Header = ({
                     </Button>
                   </Link>
                   
+                  <ThemeToggle />
+                  
                   <Button variant="ghost" size="sm">
                     <Settings className="h-4 w-4" />
                   </Button>
@@ -286,6 +289,11 @@ const Header = ({
                           <Settings className="h-4 w-4" />
                           Paramètres
                         </Button>
+
+                        <div className="flex items-center justify-between px-4 py-2">
+                          <span className="text-sm">Thème sombre</span>
+                          <ThemeToggle />
+                        </div>
                       </>
                     )}
                   </nav>

src/components/ThemeToggle.tsx

@@ -0,0 +1,43 @@
+import { Moon, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { Button } from '@/components/ui/button';
+import { useEffect, useState } from 'react';
+
+const ThemeToggle = () => {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  // Éviter l'hydration mismatch
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <Button variant="ghost" size="sm" disabled>
+        <Sun className="h-4 w-4" />
+      </Button>
+    );
+  }
+
+  const toggleTheme = () => {
+    setTheme(theme === 'dark' ? 'light' : 'dark');
+  };
+
+  return (
+    <Button 
+      variant="ghost" 
+      size="sm" 
+      onClick={toggleTheme}
+      aria-label={theme === 'dark' ? 'Activer le mode clair' : 'Activer le mode sombre'}
+    >
+      {theme === 'dark' ? (
+        <Sun className="h-4 w-4" />
+      ) : (
+        <Moon className="h-4 w-4" />
+      )}
+    </Button>
+  );
+};
+
+export default ThemeToggle;

src/main.tsx

@@ -1,5 +1,10 @@
 import { createRoot } from 'react-dom/client'
+import { ThemeProvider } from 'next-themes'
 import App from './App.tsx'
 import './index.css'
 
-createRoot(document.getElementById("root")!).render(<App />);
+createRoot(document.getElementById("root")!).render(
+  <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+    <App />
+  </ThemeProvider>
+);