From a7e585a3ded287c872d73486abedb620d805e890 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Thu, 30 Oct 2025 14:06:14 -0600
Subject: [PATCH] =?UTF-8?q?Style:=20Aplicar=20tema=20caf=C3=A9/dorado=20pe?=
 =?UTF-8?q?rsonalizado=20a=20la=20sidebar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reemplaza todos los colores por defecto de Nuxt UI (azules y verdes)
en la sidebar con la paleta de colores café/dorado personalizada.

- Toggle button: color neutral con hover café/dorado
- Tarjeta de usuario: fondo brand-surface con borde brand-border
- Avatar: ring brand-primary, indicador brand-accent
- Avatar generado: background café (c08040) en lugar de azul
- Botones de acción: hover brand-primary/10, iconos en colores del tema
- Badge notificaciones: brand-accent con texto brand-bg
- Botón cerrar sesión: colores del tema en lugar de rojo
- Vista colapsada: todos los colores actualizados
---
 nuxt4-app/app/components/app/AppSidebar.vue | 64 ++++++++++-----------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/nuxt4-app/app/components/app/AppSidebar.vue b/nuxt4-app/app/components/app/AppSidebar.vue
index 996010a..abba823 100644
--- a/nuxt4-app/app/components/app/AppSidebar.vue
+++ b/nuxt4-app/app/components/app/AppSidebar.vue
@@ -7,7 +7,7 @@
     :default-size="28"
     :min-size="20"
     :max-size="38"
-    :toggle="{ color: 'primary', variant: 'subtle', class: 'rounded-full' }"
+    :toggle="{ color: 'neutral', variant: 'ghost', class: 'rounded-full hover:bg-[var(--brand-primary)]/10 text-[var(--brand-text-muted)] hover:text-[var(--brand-primary)]' }"
   >
     <template #header="{ collapsed: isCollapsed }">
       <div class="flex items-center gap-2">
@@ -57,26 +57,26 @@
           class="p-0 space-y-2"
         >
           <!-- User Info Card -->
-          <div class="px-3 py-2.5 bg-gradient-to-br from-primary-50/50 to-transparent dark:from-primary-950/20 dark:to-transparent rounded-lg border border-primary-100/60 dark:border-primary-900/40">
+          <div class="px-3 py-2.5 bg-gradient-to-br from-[var(--brand-surface)] to-transparent rounded-lg border border-[var(--brand-border)]/60">
             <div class="flex items-center gap-3">
               <div class="relative flex-shrink-0">
                 <UAvatar
                   v-bind="userAvatar"
                   size="md"
                   :ui="{
-                    wrapper: 'ring-2 ring-primary-400/50 dark:ring-primary-500/40 shadow-sm'
+                    wrapper: 'ring-2 ring-[var(--brand-primary)]/50 shadow-sm'
                   }"
                 />
                 <span
-                  class="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-green-500 border-2 border-white dark:border-gray-950 rounded-full shadow-sm"
+                  class="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-[var(--brand-accent)] border-2 border-[var(--brand-surface)] rounded-full shadow-sm"
                   title="En línea"
                 />
               </div>
               <div class="flex-1 min-w-0">
-                <p class="font-semibold text-sm text-gray-900 dark:text-white truncate leading-tight">
+                <p class="font-semibold text-sm text-[var(--brand-text)] truncate leading-tight">
                   {{ user.name || user.username }}
                 </p>
-                <p class="text-xs text-gray-500 dark:text-gray-400 truncate mt-0.5">
+                <p class="text-xs text-[var(--brand-text-muted)] truncate mt-0.5">
                   {{ user.email }}
                 </p>
               </div>
@@ -91,24 +91,24 @@
               variant="ghost"
               size="sm"
               block
-              class="justify-start gap-2.5 hover:bg-gradient-to-r hover:from-primary-50/90 hover:to-green-50/60 dark:hover:from-primary-950/40 dark:hover:to-green-950/30 transition-all duration-300 hover:shadow-sm"
+              class="justify-start gap-2.5 hover:bg-[var(--brand-primary)]/10 transition-all duration-300 hover:shadow-sm"
               :ui="{
                 rounded: 'rounded-lg',
                 padding: { sm: 'px-2.5 py-2' }
               }"
             >
               <template #leading>
-                <div class="w-7 h-7 rounded-md bg-gradient-to-br from-primary-50 to-green-50 dark:from-primary-950/40 dark:to-green-950/40 flex items-center justify-center flex-shrink-0 relative overflow-hidden shadow-sm border border-primary-100/40 dark:border-primary-900/30">
+                <div class="w-7 h-7 rounded-md bg-[var(--brand-surface)] flex items-center justify-center flex-shrink-0 relative overflow-hidden shadow-sm border border-[var(--brand-border)]">
                   <img
                     src="/perfil-icon.png"
                     alt="Perfil"
                     class="w-4 h-4 absolute inset-0 m-auto object-cover rounded-sm opacity-90"
                     @error="handlePerfilIconError"
                   />
-                  <UIcon name="i-lucide-home" class="size-3.5 text-green-600 dark:text-green-400 opacity-0" />
+                  <UIcon name="i-lucide-home" class="size-3.5 text-[var(--brand-primary)] opacity-0" />
                 </div>
               </template>
-              <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Inicio</span>
+              <span class="text-sm font-medium text-[var(--brand-text)]">Inicio</span>
             </UButton>
 
             <UButton
@@ -117,18 +117,18 @@
               variant="ghost"
               size="sm"
               block
-              class="justify-start gap-2.5 hover:bg-primary-50/80 dark:hover:bg-primary-950/30 transition-all duration-200"
+              class="justify-start gap-2.5 hover:bg-[var(--brand-primary)]/10 transition-all duration-200"
               :ui="{
                 rounded: 'rounded-lg',
                 padding: { sm: 'px-2.5 py-2' }
               }"
             >
               <template #leading>
-                <div class="w-7 h-7 rounded-md bg-gray-50 dark:bg-gray-800/50 flex items-center justify-center flex-shrink-0">
-                  <UIcon name="i-lucide-settings" class="size-3.5 text-gray-600 dark:text-gray-400" />
+                <div class="w-7 h-7 rounded-md bg-[var(--brand-surface)] flex items-center justify-center flex-shrink-0">
+                  <UIcon name="i-lucide-settings" class="size-3.5 text-[var(--brand-text-muted)]" />
                 </div>
               </template>
-              <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Configuración</span>
+              <span class="text-sm font-medium text-[var(--brand-text)]">Configuración</span>
             </UButton>
 
             <UButton
@@ -137,31 +137,31 @@
               variant="ghost"
               size="sm"
               block
-              class="justify-start gap-2.5 hover:bg-primary-50/80 dark:hover:bg-primary-950/30 transition-all duration-200"
+              class="justify-start gap-2.5 hover:bg-[var(--brand-primary)]/10 transition-all duration-200"
               :ui="{
                 rounded: 'rounded-lg',
                 padding: { sm: 'px-2.5 py-2' }
               }"
             >
               <template #leading>
-                <div class="w-7 h-7 rounded-md bg-amber-50 dark:bg-amber-950/30 flex items-center justify-center relative flex-shrink-0">
-                  <UIcon name="i-lucide-bell" class="size-3.5 text-amber-600 dark:text-amber-400" />
-                  <span class="absolute -top-0.5 -right-0.5 w-2 h-2 bg-red-500 rounded-full ring-1 ring-white dark:ring-gray-900" />
+                <div class="w-7 h-7 rounded-md bg-[var(--brand-surface)] flex items-center justify-center relative flex-shrink-0">
+                  <UIcon name="i-lucide-bell" class="size-3.5 text-[var(--brand-primary)]" />
+                  <span class="absolute -top-0.5 -right-0.5 w-2 h-2 bg-[var(--brand-accent)] rounded-full ring-1 ring-[var(--brand-surface)]" />
                 </div>
               </template>
-              <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Notificaciones</span>
+              <span class="text-sm font-medium text-[var(--brand-text)]">Notificaciones</span>
               <template #trailing>
-                <UBadge color="red" variant="solid" size="xs" class="ml-auto">3</UBadge>
+                <UBadge color="neutral" variant="solid" size="xs" class="ml-auto bg-[var(--brand-accent)] text-[var(--brand-bg)]">3</UBadge>
               </template>
             </UButton>
 
-            <div class="pt-2 mt-1.5 border-t border-gray-200/60 dark:border-gray-800/60">
+            <div class="pt-2 mt-1.5 border-t border-[var(--brand-border)]">
               <UButton
                 color="neutral"
                 variant="ghost"
                 size="sm"
                 block
-                class="justify-start gap-2.5 hover:bg-red-50/80 dark:hover:bg-red-950/30 transition-all duration-200 group"
+                class="justify-start gap-2.5 hover:bg-[var(--brand-primary)]/10 transition-all duration-200 group"
                 :ui="{
                   rounded: 'rounded-lg',
                   padding: { sm: 'px-2.5 py-2' }
@@ -169,11 +169,11 @@
                 @click="logout"
               >
                 <template #leading>
-                  <div class="w-7 h-7 rounded-md bg-red-50 dark:bg-red-950/30 flex items-center justify-center flex-shrink-0 group-hover:bg-red-100 dark:group-hover:bg-red-950/50 transition-colors">
-                    <UIcon name="i-lucide-log-out" class="size-3.5 text-red-600 dark:text-red-400" />
+                  <div class="w-7 h-7 rounded-md bg-[var(--brand-surface)] flex items-center justify-center flex-shrink-0 group-hover:bg-[var(--brand-border)] transition-colors">
+                    <UIcon name="i-lucide-log-out" class="size-3.5 text-[var(--brand-primary)]" />
                   </div>
                 </template>
-                <span class="text-sm font-medium text-red-600 dark:text-red-400">Cerrar sesión</span>
+                <span class="text-sm font-medium text-[var(--brand-primary)]">Cerrar sesión</span>
               </UButton>
             </div>
           </div>
@@ -186,7 +186,7 @@
               color="neutral"
               variant="ghost"
               square
-              class="relative hover:bg-primary-50/50 dark:hover:bg-primary-950/20 transition-all duration-200"
+              class="relative hover:bg-[var(--brand-primary)]/10 transition-all duration-200"
               :ui="{ rounded: 'rounded-lg' }"
             >
               <div class="relative">
@@ -194,27 +194,27 @@
                   v-bind="userAvatar"
                   size="sm"
                   :ui="{
-                    wrapper: 'ring-2 ring-primary-400/40 dark:ring-primary-500/30 group-hover:ring-primary-500/60 transition-all duration-200 shadow-sm'
+                    wrapper: 'ring-2 ring-[var(--brand-primary)]/40 group-hover:ring-[var(--brand-primary)]/60 transition-all duration-200 shadow-sm'
                   }"
                 />
                 <span
-                  class="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 bg-green-500 border-2 border-white dark:border-gray-950 rounded-full shadow-sm"
+                  class="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 bg-[var(--brand-accent)] border-2 border-[var(--brand-surface)] rounded-full shadow-sm"
                 />
               </div>
             </UButton>
           </div>
 
-          <div class="w-full h-px bg-gray-200/50 dark:bg-gray-800/50" />
+          <div class="w-full h-px bg-[var(--brand-border)]" />
 
           <UButton
             @click="logout"
             color="neutral"
             variant="ghost"
             square
-            class="hover:bg-red-50 dark:hover:bg-red-950/20 transition-all duration-200"
+            class="hover:bg-[var(--brand-primary)]/10 transition-all duration-200"
             :ui="{ rounded: 'rounded-lg' }"
           >
-            <UIcon name="i-lucide-log-out" class="size-4 text-red-600 dark:text-red-400" />
+            <UIcon name="i-lucide-log-out" class="size-4 text-[var(--brand-primary)]" />
           </UButton>
         </div>
       </div>
@@ -326,7 +326,7 @@ const { user, isAuthenticated, logout } = useAuthentik()
 
 // Computed para el avatar del usuario
 const userAvatar = computed(() => ({
-  src: user.value?.avatar || `https://ui-avatars.com/api/?name=${encodeURIComponent(user.value?.name || user.value?.username || 'User')}&background=3b82f6&color=fff&bold=true&format=svg`,
+  src: user.value?.avatar || `https://ui-avatars.com/api/?name=${encodeURIComponent(user.value?.name || user.value?.username || 'User')}&background=c08040&color=1b1209&bold=true&format=svg`,
   alt: user.value?.name || user.value?.username || 'User'
 }))
 </script>