diff --git a/app/layout.tsx b/app/layout.tsx index 68f4072..b09040c 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -27,8 +27,8 @@ export default function RootLayout({ diff --git a/app/settings/page.tsx b/app/settings/page.tsx index 215d3c0..0a32e84 100644 --- a/app/settings/page.tsx +++ b/app/settings/page.tsx @@ -10,6 +10,7 @@ import { PasswordCard, ReconcileDateRangeCard, BackgroundCard, + ThemeCard, } from "@/components/settings"; import { useBankingData } from "@/lib/hooks"; import type { BankingData } from "@/lib/types"; @@ -127,6 +128,8 @@ export default function SettingsPage() { + + diff --git a/components/settings/index.ts b/components/settings/index.ts index e28bc05..1654f04 100644 --- a/components/settings/index.ts +++ b/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"; diff --git a/components/settings/theme-card.tsx b/components/settings/theme-card.tsx new file mode 100644 index 0000000..f0d21c9 --- /dev/null +++ b/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 ( + + + + + Thème + + + Choisissez le thème d'affichage de l'application + + + + setTheme(value)} + > +
+ {THEMES.map((themeOption) => { + const Icon = themeOption.icon; + return ( + + ); + })} +
+ + + + ); +} diff --git a/components/ui/sonner.tsx b/components/ui/sonner.tsx index f125983..28a69f7 100644 --- a/components/ui/sonner.tsx +++ b/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 (