From 21d3f7057fed7c5341a19e2c22a5fa5290c98cdf Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 27 Nov 2025 13:31:19 +0000
Subject: [PATCH] feat: add dark/light/system theme toggle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implemented complete theme switching with three modes:
- Light theme
- Dark theme
- System (auto-detect from OS)

Changes:
- Created ModeToggle component with dropdown menu (src/components/mode-toggle.tsx)
- Added theme toggle to desktop header (Index.tsx)
- Enhanced mobile settings with radio group for theme selection (SettingsPage.tsx)
- Changed default theme from "light" to "system" for better UX (App.tsx)

Features:
✅ Seamless theme switching without page reload
✅ Persists user preference in localStorage
✅ System theme auto-detects OS preference
✅ Smooth transitions between themes
✅ Works on both mobile and desktop

Desktop: Theme toggle button in top navigation
Mobile: Theme settings in Settings page with Light/Dark/System options
---
 src/App.tsx                       |  2 +-
 src/components/mode-toggle.tsx    | 36 +++++++++++++++++++++++++++++
 src/pages/Index.tsx               |  3 +++
 src/pages/mobile/SettingsPage.tsx | 38 +++++++++++++++++++------------
 4 files changed, 64 insertions(+), 15 deletions(-)
 create mode 100644 src/components/mode-toggle.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 42ed1da..06ed6d3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -75,7 +75,7 @@ const App = () => {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <ThemeProvider defaultTheme="light" storageKey="notes-theme">
+      <ThemeProvider defaultTheme="system" storageKey="notes-theme">
         <TooltipProvider>
           <BrowserRouter>
             <Routes>
diff --git a/src/components/mode-toggle.tsx b/src/components/mode-toggle.tsx
new file mode 100644
index 0000000..f0a5d04
--- /dev/null
+++ b/src/components/mode-toggle.tsx
@@ -0,0 +1,36 @@
+import { Moon, Sun } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useTheme } from "@/components/theme-provider";
+
+export function ModeToggle() {
+  const { setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Clair
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Sombre
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          Système
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index b553b3b..14a4138 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -32,6 +32,7 @@ import { ConfirmModal } from "@/components/modals/ConfirmModal";
 import { InputModal } from "@/components/modals/InputModal";
 import { AddUserModal } from "@/components/modals/AddUserModal";
 import { compressImage, formatFileSize } from "@/utils/imageCompression";
+import { ModeToggle } from "@/components/mode-toggle";
 
 // ===== FONCTIONS UTILITAIRES TIMEZONE EUROPE/PARIS =====
 
@@ -923,6 +924,8 @@ const Index = () => {
                 Nouvelle Note
               </Button>
 
+              <ModeToggle />
+
               {user && (
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
diff --git a/src/pages/mobile/SettingsPage.tsx b/src/pages/mobile/SettingsPage.tsx
index 8f528ad..be2bcb7 100644
--- a/src/pages/mobile/SettingsPage.tsx
+++ b/src/pages/mobile/SettingsPage.tsx
@@ -4,6 +4,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Switch } from "@/components/ui/switch";
 import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
   User,
   LogOut,
@@ -53,10 +54,6 @@ export default function SettingsPage() {
     }
   };
 
-  const toggleTheme = () => {
-    setTheme(theme === "dark" ? "light" : "dark");
-  };
-
   return (
     <div className="p-4 space-y-6 pb-24">
       {/* Appearance */}
@@ -68,16 +65,29 @@ export default function SettingsPage() {
           </CardTitle>
         </CardHeader>
         <CardContent>
-          <div className="flex items-center justify-between">
-            <Label htmlFor="dark-mode" className="text-base">
-              Mode sombre
-            </Label>
-            <Switch
-              id="dark-mode"
-              checked={theme === "dark"}
-              onCheckedChange={toggleTheme}
-            />
-          </div>
+          <RadioGroup value={theme} onValueChange={(value) => setTheme(value as "light" | "dark" | "system")}>
+            <div className="flex items-center space-x-2 mb-3">
+              <RadioGroupItem value="light" id="light" />
+              <Label htmlFor="light" className="text-base font-normal cursor-pointer flex items-center gap-2">
+                <Sun className="h-4 w-4" />
+                Clair
+              </Label>
+            </div>
+            <div className="flex items-center space-x-2 mb-3">
+              <RadioGroupItem value="dark" id="dark" />
+              <Label htmlFor="dark" className="text-base font-normal cursor-pointer flex items-center gap-2">
+                <Moon className="h-4 w-4" />
+                Sombre
+              </Label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <RadioGroupItem value="system" id="system" />
+              <Label htmlFor="system" className="text-base font-normal cursor-pointer flex items-center gap-2">
+                <User className="h-4 w-4" />
+                Système
+              </Label>
+            </div>
+          </RadioGroup>
         </CardContent>
       </Card>