feat: update theme management across the application; change default theme to 'light', disable system theme option, and add ThemeCard component in settings for enhanced user customization

components/settings/index.ts

@@ -5,3 +5,4 @@ export { BackupCard } from "./backup-card";
 export { PasswordCard } from "./password-card";
 export { ReconcileDateRangeCard } from "./reconcile-date-range-card";
 export { BackgroundCard } from "./background-card";
+export { ThemeCard } from "./theme-card";

components/settings/theme-card.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Moon, Sun } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const THEMES = [
+  {
+    value: "light",
+    label: "Clair",
+    icon: Sun,
+    description: "Thème clair",
+  },
+  {
+    value: "dark",
+    label: "Sombre",
+    icon: Moon,
+    description: "Thème sombre",
+  },
+] as const;
+
+export function ThemeCard() {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  // Éviter le flash de contenu non stylé
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  const currentTheme = theme || "light";
+
+  return (
+    <Card className="card-hover">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Moon className="w-5 h-5" />
+          Thème
+        </CardTitle>
+        <CardDescription>
+          Choisissez le thème d'affichage de l'application
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <RadioGroup
+          value={currentTheme}
+          onValueChange={(value) => setTheme(value)}
+        >
+          <div className="grid grid-cols-2 gap-3">
+            {THEMES.map((themeOption) => {
+              const Icon = themeOption.icon;
+              return (
+                <label
+                  key={themeOption.value}
+                  htmlFor={`theme-${themeOption.value}`}
+                  className={cn(
+                    "relative flex flex-col items-center justify-center p-4 rounded-lg border-2 cursor-pointer transition-all",
+                    currentTheme === themeOption.value
+                      ? "border-primary bg-primary/5"
+                      : "border-border hover:border-primary/50"
+                  )}
+                >
+                  <RadioGroupItem
+                    value={themeOption.value}
+                    id={`theme-${themeOption.value}`}
+                    className="sr-only"
+                  />
+                  <Icon className="w-6 h-6 mb-2" />
+                  <span className="text-sm font-medium">
+                    {themeOption.label}
+                  </span>
+                </label>
+              );
+            })}
+          </div>
+        </RadioGroup>
+      </CardContent>
+    </Card>
+  );
+}

components/ui/sonner.tsx

@@ -4,11 +4,11 @@ import { useTheme } from "next-themes";
 import { Toaster as Sonner, ToasterProps } from "sonner";
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme();
+  const { theme = "light" } = useTheme();
 
   return (
     <Sonner
-      theme={theme as ToasterProps["theme"]}
+      theme={theme === "system" ? "dark" : (theme as ToasterProps["theme"])}
       className="toaster group"
       style={
         {