feat: add dark mode

components/ui.tsx

@@ -22,7 +22,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 const buttonVariants: Record<ButtonVariant, string> = {
   primary: "bg-primary text-white hover:bg-primary-hover",
   secondary:
-    "bg-surface-muted text-foreground hover:bg-[#e2e6f2] border border-border",
+    "bg-surface-muted text-foreground hover:bg-surface-hover border border-border",
   danger: "bg-danger text-white hover:opacity-90",
   ghost: "text-muted hover:bg-surface-muted",
 };
@@ -115,7 +115,7 @@ export function Switch({
       <span
         className={cn(
           "relative h-6 w-11 rounded-full transition",
-          checked ? "bg-primary" : "bg-[#cdd3e6]",
+          checked ? "bg-primary" : "bg-[var(--switch-off)]",
         )}
       >
         <span
@@ -182,8 +182,8 @@ export function Badge({
       className={cn(
         "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
         tone === "neutral" && "bg-surface-muted text-muted",
-        tone === "success" && "bg-[#e3f6ee] text-success",
-        tone === "danger" && "bg-[#fbe7ea] text-danger",
+        tone === "success" && "bg-success/15 text-success",
+        tone === "danger" && "bg-danger/15 text-danger",
         tone === "primary" && "bg-primary-soft text-primary",
       )}
     >