From d1006acf9444dce6f9a75010813f6aa4970a28ee Mon Sep 17 00:00:00 2001 From: josedario87 Date: Thu, 30 Oct 2025 15:54:47 -0600 Subject: [PATCH] =?UTF-8?q?Fix:=20Correcci=C3=B3n=20definitiva=20del=20fon?= =?UTF-8?q?do=20de=20sidebar=20al=20tema=20caf=C3=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Corregir prop :ui de 'wrapper' a 'root' en UDashboardSidebar - Agregar mapeo explícito de variables --ui-color-neutral-* a coffee - Esto fuerza a Nuxt UI a usar la paleta café en lugar de slate/azul - Soluciona el problema de fondo azul en todos los navegadores --- nuxt4-app/app/assets/css/main.css | 13 +++++++++++++ nuxt4-app/app/components/app/AppSidebar.vue | 2 +- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/nuxt4-app/app/assets/css/main.css b/nuxt4-app/app/assets/css/main.css index 1813a40..5369d4f 100644 --- a/nuxt4-app/app/assets/css/main.css +++ b/nuxt4-app/app/assets/css/main.css @@ -26,6 +26,19 @@ --brand-accent: #ffe0a0; --brand-text: #fef9f0; --brand-text-muted: #d8c7a6; + + /* Mapear variables UI neutral a coffee para que Nuxt UI use el tema café */ + --ui-color-neutral-50: var(--color-coffee-50); + --ui-color-neutral-100: var(--color-coffee-100); + --ui-color-neutral-200: var(--color-coffee-200); + --ui-color-neutral-300: var(--color-coffee-300); + --ui-color-neutral-400: var(--color-coffee-400); + --ui-color-neutral-500: var(--color-coffee-500); + --ui-color-neutral-600: var(--color-coffee-600); + --ui-color-neutral-700: var(--color-coffee-700); + --ui-color-neutral-800: var(--color-coffee-800); + --ui-color-neutral-900: var(--color-coffee-900); + --ui-color-neutral-950: var(--color-coffee-950); } /* Critical: Prevent white flash on load */ diff --git a/nuxt4-app/app/components/app/AppSidebar.vue b/nuxt4-app/app/components/app/AppSidebar.vue index 0dbcfd5..d215278 100644 --- a/nuxt4-app/app/components/app/AppSidebar.vue +++ b/nuxt4-app/app/components/app/AppSidebar.vue @@ -9,7 +9,7 @@ :max-size="38" :toggle="{ color: 'neutral', variant: 'ghost', class: 'rounded-full hover:bg-[var(--brand-primary)]/10 text-[var(--brand-text-muted)] hover:text-[var(--brand-primary)]' }" :ui="{ - wrapper: 'bg-[var(--brand-surface)] border-r border-[var(--brand-border)]' + root: 'bg-[var(--brand-surface)] border-r border-[var(--brand-border)]' }" >