wip(Front dark mode)

resources/js/components/app-header.tsx

@@ -33,6 +33,7 @@ import { dashboard } from '@/routes';
 import { type BreadcrumbItem, type NavItem, type SharedData } from '@/types';
 import { Link, usePage } from '@inertiajs/react';
 import { BookOpen, Folder, LayoutGrid, Menu, Search } from 'lucide-react';
+import AppearanceToggleDropdown from './appearance-dropdown';
 import AppLogo from './app-logo';
 import AppLogoIcon from './app-logo-icon';
 
@@ -238,6 +239,7 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
                                 ))}
                             </div>
                         </div>
+                        <AppearanceToggleDropdown />
                         <DropdownMenu>
                             <DropdownMenuTrigger asChild>
                                 <Button

resources/js/layouts/nav-guest-layout.tsx

@@ -5,6 +5,7 @@ import {Button} from "@/components/ui/button";
 import type {SharedData} from "@/types";
 import {useMobileNavigation} from "@/hooks/use-mobile-navigation";
 import {LogOut} from "lucide-react";
+import React, {useEffect, useState} from "react";
 
 export default function NavGuestLayout() {
     const {auth} = usePage<SharedData>().props;
@@ -15,6 +16,16 @@ export default function NavGuestLayout() {
         router.flushAll();
     };
 
+    const [dark, setDark] = useState(false);
+
+    useEffect(() => {
+        if (dark) {
+            document.documentElement.classList.add("dark");
+        } else {
+            document.documentElement.classList.remove("dark");
+        }
+    }, [dark]);
+
     return (
         <>
             <header
@@ -90,6 +101,12 @@ export default function NavGuestLayout() {
                         </>
                     )}
                 </nav>
+                <button
+                    onClick={() => setDark(!dark)}
+                    className="absolute top-4 right-4 px-3 py-1 rounded-xl border border-gray-400 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-800 transition"
+                >
+                    {dark ? "☀️ Mode clair" : "🌙 Mode sombre"}
+                </button>
             </header>
         </>
     )