Added routes

apps/web/src/features/settings/AppearanceCard.tsx

@@ -0,0 +1,42 @@
+import { Check } from 'lucide-react'
+import { cn } from '../../lib/utils'
+import { useTheme } from '../../context/ThemeProvider'
+import { THEME_ICONS, THEME_OPTIONS } from './constants'
+
+export function AppearanceCard() {
+  const { theme, setTheme } = useTheme()
+
+  return (
+    <div className="divide-y divide-border rounded-xl border border-border bg-surface">
+      <div className="px-4 py-3">
+        <p className="text-sm font-medium text-primary">Apariencia</p>
+        <p className="text-xs text-foreground/50">Tema claro u oscuro</p>
+      </div>
+      {THEME_OPTIONS.map((option) => {
+        const Icon = THEME_ICONS[option.value]
+        const isSelected = theme === option.value
+        return (
+          <button
+            key={option.value}
+            type="button"
+            onClick={() => setTheme(option.value)}
+            className="flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-primary-soft"
+          >
+            <span className={cn('rounded-lg p-2', isSelected ? 'bg-accent-soft' : 'bg-primary-soft')}>
+              <Icon
+                className={cn('size-4', isSelected ? 'text-accent-fg' : 'text-foreground/70')}
+              />
+            </span>
+            <div className="min-w-0 flex-1">
+              <p className={cn('text-sm font-medium', isSelected ? 'text-accent-fg' : 'text-primary')}>
+                {option.label}
+              </p>
+              <p className="text-xs text-foreground/50">{option.description}</p>
+            </div>
+            {isSelected ? <Check className="size-4 text-accent-fg" /> : null}
+          </button>
+        )
+      })}
+    </div>
+  )
+}