From 51317b0d08184fcf96de7bee17777acdc23e69a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20LAGACHE?= <theo.lagache@soluce-technologies.com>
Date: Wed, 17 Jun 2026 10:24:10 +0200
Subject: [PATCH] style(onboarding): restyle theme toggles in preferences step
 to org-combobox card style

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../onboarding/steps/step-preferences.tsx     | 37 ++++++++++++++++---
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/features/onboarding/steps/step-preferences.tsx b/src/features/onboarding/steps/step-preferences.tsx
index 501b53b9..9915a0c7 100644
--- a/src/features/onboarding/steps/step-preferences.tsx
+++ b/src/features/onboarding/steps/step-preferences.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { useOnboarding } from "@onboardjs/react";
+import { Check, Moon, Sun } from "lucide-react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
@@ -35,6 +36,11 @@ export const StepPreferences = () => {
         await next();
     };
 
+    const themeOptions: { value: "light" | "dark"; label: string; Icon: typeof Sun }[] = [
+        { value: "light", label: "Light", Icon: Sun },
+        { value: "dark", label: "Dark", Icon: Moon },
+    ];
+
     return (
         <div className="flex flex-col gap-4">
             <div>
@@ -52,12 +58,31 @@ export const StepPreferences = () => {
                 </label>
             </div>
             <div className="flex gap-2">
-                <Button type="button" variant={theme === "light" ? "default" : "outline"} onClick={() => setTheme("light")}>
-                    Light
-                </Button>
-                <Button type="button" variant={theme === "dark" ? "default" : "outline"} onClick={() => setTheme("dark")}>
-                    Dark
-                </Button>
+                {themeOptions.map(({ value, label, Icon }) => {
+                    const isActive = theme === value;
+                    return (
+                        <button
+                            key={value}
+                            type="button"
+                            onClick={() => setTheme(value)}
+                            className={`flex items-center gap-2 rounded-lg border p-3 text-sm transition-colors flex-1 ${
+                                isActive
+                                    ? "border-primary/20 bg-primary/10 text-primary"
+                                    : "border-border hover:bg-accent/50 hover:border-primary/20"
+                            }`}
+                        >
+                            <div className="size-7 rounded-md border bg-muted/50 flex items-center justify-center shrink-0">
+                                <Icon className="size-4" />
+                            </div>
+                            <span className="flex-1 text-left">{label}</span>
+                            {isActive && (
+                                <div className="size-5 rounded-full bg-primary flex items-center justify-center">
+                                    <Check className="size-3 text-primary-foreground" strokeWidth={3} />
+                                </div>
+                            )}
+                        </button>
+                    );
+                })}
             </div>
             <Button type="button" onClick={onContinue}>
                 Continue