Ajout du mode clair/sombre (dark mode)

- Installation de next-themes - Création du composant ThemeToggle avec icônes soleil/lune - Intégration du ThemeProvider dans le layout - Ajout du toggle dans la navigation mobile et le header admin - Adaptation des couleurs pour le dark mode (tropical chic) - Mise à jour des composants UI (Card, Button) pour le dark mode - Adaptation des composants principaux (Layout, WifiCard, etc.)
2025-11-23 16:53:27 +01:00
parent 106f15205c
commit 0e485aacee
13 changed files with 124 additions and 32 deletions
--- a/app/globals.css
+++ b/app/globals.css
@ -4,10 +4,10 @@

@layer base {
  body {
-    @apply bg-background;
+    @apply bg-background dark:bg-background-dark;
    font-size: 16px;
    min-height: 100vh;
-    color: #1f2937;
+    @apply text-foreground dark:text-foreground-dark;
  }
 }

--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import PWARegister from "@/components/PWARegister";
+import { ThemeProvider } from "@/components/ThemeProvider";

 const inter = Inter({ subsets: ["latin"] });

@ -29,14 +30,21 @@ export default function RootLayout({
  children: React.ReactNode;
 }>) {
  return (
-    <html lang="fr">
+    <html lang="fr" suppressHydrationWarning>
      <head>
        <link rel="icon" href="/logo-relais-marama.svg" type="image/svg+xml" />
        <link rel="apple-touch-icon" href="/logo-relais-marama.svg" />
      </head>
      <body className={inter.className}>
-        {children}
-        <PWARegister />
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="light"
+          enableSystem={true}
+          disableTransitionOnChange={false}
+        >
+          {children}
+          <PWARegister />
+        </ThemeProvider>
      </body>
    </html>
  );