syoul/Compagnon-du-Lagon---Marama
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ajout du mode clair/sombre (dark mode)

Browse Source 
- 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.)
This commit is contained in:
syoul
2025-11-23 16:53:27 +01:00
parent 106f15205c
commit 0e485aacee
13 changed files with 124 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/globals.css
View File

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

10
app/layout.tsx
View File

@ -2,6 +2,7 @@ import type { Metadata } from "next";
import { Inter } from "next/font/google"; import { Inter } from "next/font/google";
import "./globals.css"; import "./globals.css";
import PWARegister from "@/components/PWARegister"; import PWARegister from "@/components/PWARegister";
import { ThemeProvider } from "@/components/ThemeProvider";
const inter = Inter({ subsets: ["latin"] }); const inter = Inter({ subsets: ["latin"] });
@ -29,14 +30,21 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang="fr"> <html lang="fr" suppressHydrationWarning>
<head> <head>
<link rel="icon" href="/logo-relais-marama.svg" type="image/svg+xml" /> <link rel="icon" href="/logo-relais-marama.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/logo-relais-marama.svg" /> <link rel="apple-touch-icon" href="/logo-relais-marama.svg" />
</head> </head>
<body className={inter.className}> <body className={inter.className}>
<ThemeProvider
attribute="class"
defaultTheme="light"
enableSystem={true}
disableTransitionOnChange={false}
>
{children} {children}
<PWARegister /> <PWARegister />
</ThemeProvider>
</body> </body>
</html> </html>
); );

9
components/ThemeProvider.tsx Normal file
View File

@ -0,0 +1,9 @@
"use client";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { type ThemeProviderProps } from "next-themes/dist/types";
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}

45
components/ThemeToggle.tsx Normal file
View File

@ -0,0 +1,45 @@
"use client";
import { useTheme } from "next-themes";
import { Moon, Sun } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useEffect, useState } from "react";
export function ThemeToggle() {
const { theme, setTheme } = useTheme();
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
if (!mounted) {
return (
<Button
variant="ghost"
size="icon"
className="h-9 w-9 rounded-full"
aria-label="Changer de thème"
>
<Sun className="h-5 w-5" />
</Button>
);
}
return (
<Button
variant="ghost"
size="icon"
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
className="h-10 w-10 rounded-full hover:bg-secondary dark:hover:bg-gray-800"
aria-label="Changer de thème"
>
{theme === "dark" ? (
<Sun className="h-5 w-5 text-primary dark:text-yellow-400" />
) : (
<Moon className="h-5 w-5 text-primary dark:text-blue-300" />
)}
</Button>
);
}

14
components/accueil/WifiCard.tsx
View File

@ -71,7 +71,7 @@ export default function WifiCard() {
const showPasswordFallback = error && error.includes("sélectionner manuellement"); const showPasswordFallback = error && error.includes("sélectionner manuellement");
return ( return (
<Card className="bg-white"> <Card>
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-2"> <CardTitle className="flex items-center gap-2">
<Wifi className="h-6 w-6 text-primary" /> <Wifi className="h-6 w-6 text-primary" />
@ -80,22 +80,22 @@ export default function WifiCard() {
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div> <div>
<p className="text-sm text-gray-600 mb-1">Nom du réseau</p> <p className="text-sm text-gray-600 dark:text-gray-400 mb-1">Nom du réseau</p>
<p className="text-lg font-semibold text-primary">{wifiName || "Chargement..."}</p> <p className="text-lg font-semibold text-primary">{wifiName || "Chargement..."}</p>
</div> </div>
{showPasswordFallback && wifiPassword && ( {showPasswordFallback && wifiPassword && (
<div className="bg-yellow-50 border border-yellow-200 rounded-xl p-3"> <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-xl p-3">
<p className="text-sm text-yellow-800 font-mono select-all"> <p className="text-sm text-yellow-800 dark:text-yellow-300 font-mono select-all">
{wifiPassword} {wifiPassword}
</p> </p>
</div> </div>
)} )}
{error && !showPasswordFallback && ( {error && !showPasswordFallback && (
<div className="bg-red-50 border border-red-200 rounded-xl p-3 flex items-start gap-2"> <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl p-3 flex items-start gap-2">
<AlertCircle className="h-5 w-5 text-red-600 flex-shrink-0 mt-0.5" /> <AlertCircle className="h-5 w-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
<p className="text-sm text-red-800">{error}</p> <p className="text-sm text-red-800 dark:text-red-300">{error}</p>
</div> </div>
)} )}

12
components/admin/AdminLayout.tsx
View File

@ -3,6 +3,7 @@
import { LogOut } from "lucide-react"; import { LogOut } from "lucide-react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { ThemeToggle } from "@/components/ThemeToggle";
export default function AdminLayout({ children }: { children: React.ReactNode }) { export default function AdminLayout({ children }: { children: React.ReactNode }) {
const router = useRouter(); const router = useRouter();
@ -13,15 +14,18 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
}; };
return ( return (
<div className="min-h-screen bg-background"> <div className="min-h-screen bg-background dark:bg-background-dark">
<header className="bg-white border-b border-gray-200 shadow-sm"> <header className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-sm">
<div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between"> <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
<h1 className="text-xl font-bold text-primary">Administration</h1> <h1 className="text-xl font-bold text-primary dark:text-primary">Administration</h1>
<Button variant="outline" size="sm" onClick={handleLogout}> <div className="flex items-center gap-2">
<ThemeToggle />
<Button variant="outline" size="sm" onClick={handleLogout} className="dark:border-gray-700 dark:text-gray-300">
<LogOut className="h-4 w-4 mr-2" /> <LogOut className="h-4 w-4 mr-2" />
Déconnexion Déconnexion
</Button> </Button>
</div> </div>
</div>
</header> </header>
<main className="max-w-4xl mx-auto px-4 py-6">{children}</main> <main className="max-w-4xl mx-auto px-4 py-6">{children}</main>
</div> </div>

2
components/layout/Layout.tsx
View File

@ -2,7 +2,7 @@ import TabNavigation from "./TabNavigation";
export default function Layout({ children }: { children: React.ReactNode }) { export default function Layout({ children }: { children: React.ReactNode }) {
return ( return (
<div className="min-h-screen bg-background pb-16"> <div className="min-h-screen bg-background dark:bg-background-dark pb-16">
{children} {children}
<TabNavigation /> <TabNavigation />
</div> </div>

10
components/layout/TabNavigation.tsx
View File

@ -4,6 +4,7 @@ import Link from "next/link";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { Home, MapPin, Info, Waves } from "lucide-react"; import { Home, MapPin, Info, Waves } from "lucide-react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { ThemeToggle } from "@/components/ThemeToggle";
const tabs = [ const tabs = [
{ {
@ -32,7 +33,7 @@ export default function TabNavigation() {
const pathname = usePathname(); const pathname = usePathname();
return ( return (
<nav className="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-gray-200 shadow-lg"> <nav className="fixed bottom-0 left-0 right-0 z-50 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800 shadow-lg">
<div className="flex items-center justify-around h-16 px-2"> <div className="flex items-center justify-around h-16 px-2">
{tabs.map((tab) => { {tabs.map((tab) => {
const Icon = tab.icon; const Icon = tab.icon;
@ -44,8 +45,8 @@ export default function TabNavigation() {
className={cn( className={cn(
"flex flex-col items-center justify-center gap-1 flex-1 h-full rounded-xl transition-colors", "flex flex-col items-center justify-center gap-1 flex-1 h-full rounded-xl transition-colors",
isActive isActive
? "text-primary bg-secondary" ? "text-primary bg-secondary dark:bg-primary/20"
: "text-gray-500 hover:text-primary hover:bg-gray-50" : "text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-primary hover:bg-gray-50 dark:hover:bg-gray-800"
)} )}
> >
<Icon className="h-6 w-6" /> <Icon className="h-6 w-6" />
@ -53,6 +54,9 @@ export default function TabNavigation() {
</Link> </Link>
); );
})} })}
<div className="flex items-center justify-center h-full px-2">
<ThemeToggle />
</div>
</div> </div>
</nav> </nav>
); );

8
components/ui/button.tsx
View File

@ -7,10 +7,10 @@ const buttonVariants = cva(
{ {
variants: { variants: {
variant: { variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90", default: "bg-primary text-primary-foreground hover:bg-primary/90 dark:bg-primary dark:hover:bg-primary/80",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 dark:bg-primary/20 dark:text-primary dark:hover:bg-primary/30",
outline: "border-2 border-primary text-primary hover:bg-primary hover:text-white", outline: "border-2 border-primary text-primary hover:bg-primary hover:text-white dark:border-primary dark:text-primary dark:hover:bg-primary dark:hover:text-white",
ghost: "hover:bg-secondary hover:text-secondary-foreground", ghost: "hover:bg-secondary hover:text-secondary-foreground dark:hover:bg-gray-800 dark:hover:text-gray-200",
}, },
size: { size: {
default: "h-12 px-6 py-3", default: "h-12 px-6 py-3",

4
components/ui/card.tsx
View File

@ -8,7 +8,7 @@ const Card = React.forwardRef<
<div <div
ref={ref} ref={ref}
className={cn( className={cn(
"rounded-2xl border border-gray-200 bg-white shadow-sm", "rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm",
className className
)} )}
{...props} {...props}
@ -46,7 +46,7 @@ const CardDescription = React.forwardRef<
>(({ className, ...props }, ref) => ( >(({ className, ...props }, ref) => (
<p <p
ref={ref} ref={ref}
className={cn("text-sm text-gray-600", className)} className={cn("text-sm text-gray-600 dark:text-gray-400", className)}
{...props} {...props}
/> />
)); ));

11
package-lock.json generated
View File

@ -15,6 +15,7 @@
"clsx": "^2.1.1", "clsx": "^2.1.1",
"lucide-react": "^0.460.0", "lucide-react": "^0.460.0",
"next": "^14.2.33", "next": "^14.2.33",
"next-themes": "^0.4.6",
"qrcode.react": "^4.2.0", "qrcode.react": "^4.2.0",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
@ -4757,6 +4758,16 @@
} }
} }
}, },
"node_modules/next-themes": {
"version": "0.4.6",
"resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
"integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
"license": "MIT",
"peerDependencies": {
"react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
}
},
"node_modules/next/node_modules/postcss": { "node_modules/next/node_modules/postcss": {
"version": "8.4.31", "version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",

1
package.json
View File

@ -16,6 +16,7 @@
"clsx": "^2.1.1", "clsx": "^2.1.1",
"lucide-react": "^0.460.0", "lucide-react": "^0.460.0",
"next": "^14.2.33", "next": "^14.2.33",
"next-themes": "^0.4.6",
"qrcode.react": "^4.2.0", "qrcode.react": "^4.2.0",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",

16
tailwind.config.ts
View File

@ -17,10 +17,20 @@ const config: Config = {
secondary: { secondary: {
DEFAULT: "#ECFCCB", DEFAULT: "#ECFCCB",
foreground: "#0E7490", foreground: "#0E7490",
dark: "#1a3a2e",
},
background: {
DEFAULT: "#FAFAFA",
dark: "#0f172a",
},
foreground: {
DEFAULT: "#1f2937",
dark: "#f1f5f9",
},
border: {
DEFAULT: "#e5e7eb",
dark: "#334155",
}, },
background: "#FAFAFA",
foreground: "#1f2937",
border: "#e5e7eb",
}, },
borderRadius: { borderRadius: {
xl: "1rem", xl: "1rem",