From 16f74829a6ddc0192838bc44569174d8b5f6c9f5 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Thu, 16 Oct 2025 22:26:50 -0600
Subject: [PATCH] Fix: Sincronizar tema con clase dark de Nuxt UI y arreglar
 selectores CSS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Agregar función applyThemeClass para sincronizar con HTML
- Aplicar clase dark/light al elemento HTML
- Agregar watcher para actualizar clase en cambios de tema
- Inicializar clase correcta en onMounted
- Separar estilos dark mode en bloque sin scoped
- Usar selectores .dark directos en lugar de :global(.dark)
- Agregar !important para superar especificidad de scoped
---
 nuxt4/app/app.vue                             | 35 ++++----
 nuxt4/app/components/UserHeader.vue           | 81 ++++++++++---------
 .../app/components/auth/ApplicationsList.vue  | 74 +++++++++--------
 3 files changed, 100 insertions(+), 90 deletions(-)

diff --git a/nuxt4/app/app.vue b/nuxt4/app/app.vue
index 10b48d6..2c575ff 100644
--- a/nuxt4/app/app.vue
+++ b/nuxt4/app/app.vue
@@ -85,14 +85,6 @@ useHead({
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-:global(.dark) .quick-actions {
-  background: rgba(0, 0, 0, 0.15);
-  box-shadow:
-    0 8px 32px 0 rgba(0, 0, 0, 0.5),
-    inset 0 1px 1px 0 rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-}
-
 .auth-message {
   display: flex;
   align-items: center;
@@ -109,14 +101,6 @@ useHead({
     inset 0 1px 1px 0 rgba(255, 255, 255, 0.3);
 }
 
-:global(.dark) .auth-message :deep(.card) {
-  background: rgba(0, 0, 0, 0.15);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  box-shadow:
-    0 8px 32px 0 rgba(0, 0, 0, 0.5),
-    inset 0 1px 1px 0 rgba(255, 255, 255, 0.05);
-}
-
 /* Responsive */
 @media (max-width: 768px) {
   .main-content {
@@ -129,3 +113,22 @@ useHead({
   }
 }
 </style>
+
+<style>
+/* Estilos de modo oscuro (sin scoped para que .dark funcione correctamente) */
+.dark .quick-actions {
+  background: rgba(0, 0, 0, 0.15) !important;
+  box-shadow:
+    0 8px 32px 0 rgba(0, 0, 0, 0.5),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.05) !important;
+  border: 1px solid rgba(255, 255, 255, 0.08) !important;
+}
+
+.dark .auth-message :deep(.card) {
+  background: rgba(0, 0, 0, 0.15) !important;
+  border: 1px solid rgba(255, 255, 255, 0.08) !important;
+  box-shadow:
+    0 8px 32px 0 rgba(0, 0, 0, 0.5),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.05) !important;
+}
+</style>
diff --git a/nuxt4/app/components/UserHeader.vue b/nuxt4/app/components/UserHeader.vue
index bc95f94..52a650c 100644
--- a/nuxt4/app/components/UserHeader.vue
+++ b/nuxt4/app/components/UserHeader.vue
@@ -216,21 +216,6 @@ const handleSubmit = async () => {
   border-color: rgba(var(--color-primary-500), 0.5);
 }
 
-:global(.dark) .header-content {
-  background: rgba(0, 0, 0, 0.15);
-  box-shadow:
-    0 8px 32px 0 rgba(0, 0, 0, 0.5),
-    inset 0 1px 1px 0 rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-}
-
-:global(.dark) .header-content:hover {
-  box-shadow:
-    0 12px 40px 0 rgba(0, 0, 0, 0.6),
-    0 0 0 1px rgba(var(--color-primary-500), 0.6),
-    inset 0 1px 1px 0 rgba(255, 255, 255, 0.1);
-}
-
 .avatar-section {
   flex-shrink: 0;
 }
@@ -257,21 +242,12 @@ const handleSubmit = async () => {
   transition: color 0.3s ease;
 }
 
-:global(.dark) .user-name {
-  color: var(--color-gray-100);
-}
-
 .user-email {
   font-size: 0.875rem;
   color: var(--color-gray-600);
   margin: 0.25rem 0 0.75rem 0;
 }
 
-:global(.dark) .user-email {
-  color: var(--color-gray-900);
-  font-weight: 600;
-}
-
 .user-badges {
   display: flex;
   flex-wrap: wrap;
@@ -341,14 +317,6 @@ const handleSubmit = async () => {
   z-index: 10;
 }
 
-:global(.dark) .theme-toggle {
-  background: rgba(0, 0, 0, 0.15);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow:
-    0 4px 16px 0 rgba(0, 0, 0, 0.5),
-    inset 0 1px 1px 0 rgba(255, 255, 255, 0.05);
-}
-
 .theme-toggle:hover {
   transform: scale(1.15) rotate(20deg) translateY(-2px);
   box-shadow:
@@ -357,13 +325,6 @@ const handleSubmit = async () => {
     inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
 }
 
-:global(.dark) .theme-toggle:hover {
-  box-shadow:
-    0 8px 24px 0 rgba(0, 0, 0, 0.7),
-    0 0 0 1px rgba(var(--color-primary-500), 0.7),
-    inset 0 1px 1px 0 rgba(255, 255, 255, 0.1);
-}
-
 .theme-icon-enter-active,
 .theme-icon-leave-active {
   transition: all 0.3s ease;
@@ -412,3 +373,45 @@ const handleSubmit = async () => {
   }
 }
 </style>
+
+<style>
+/* Estilos de modo oscuro (sin scoped para que .dark funcione correctamente) */
+.dark .header-content {
+  background: rgba(0, 0, 0, 0.15) !important;
+  box-shadow:
+    0 8px 32px 0 rgba(0, 0, 0, 0.5),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.05) !important;
+  border: 1px solid rgba(255, 255, 255, 0.08) !important;
+}
+
+.dark .header-content:hover {
+  box-shadow:
+    0 12px 40px 0 rgba(0, 0, 0, 0.6),
+    0 0 0 1px rgba(var(--color-primary-500), 0.6),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.1) !important;
+}
+
+.dark .user-name {
+  color: var(--color-gray-100) !important;
+}
+
+.dark .user-email {
+  color: var(--color-gray-900) !important;
+  font-weight: 600;
+}
+
+.dark .theme-toggle {
+  background: rgba(0, 0, 0, 0.15) !important;
+  border: 1px solid rgba(255, 255, 255, 0.1) !important;
+  box-shadow:
+    0 4px 16px 0 rgba(0, 0, 0, 0.5),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.05) !important;
+}
+
+.dark .theme-toggle:hover {
+  box-shadow:
+    0 8px 24px 0 rgba(0, 0, 0, 0.7),
+    0 0 0 1px rgba(var(--color-primary-500), 0.7),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.1) !important;
+}
+</style>
diff --git a/nuxt4/app/components/auth/ApplicationsList.vue b/nuxt4/app/components/auth/ApplicationsList.vue
index 5725d29..b958f8f 100644
--- a/nuxt4/app/components/auth/ApplicationsList.vue
+++ b/nuxt4/app/components/auth/ApplicationsList.vue
@@ -175,6 +175,7 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
+/* Estilos de modo oscuro deben estar fuera de scoped para .dark */
 .applications-container {
   background: rgba(255, 255, 255, 0.35);
   backdrop-filter: blur(20px) saturate(180%);
@@ -187,14 +188,6 @@ onUnmounted(() => {
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-:global(.dark) .applications-container {
-  background: rgba(0, 0, 0, 0.15);
-  box-shadow:
-    0 8px 32px 0 rgba(0, 0, 0, 0.5),
-    inset 0 1px 1px 0 rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-}
-
 .applications-header {
   margin-bottom: 2rem;
 }
@@ -209,10 +202,6 @@ onUnmounted(() => {
   margin: 0;
 }
 
-:global(.dark) .applications-title {
-  color: var(--color-gray-100);
-}
-
 .filter-section {
   display: flex;
   flex-wrap: wrap;
@@ -261,14 +250,6 @@ onUnmounted(() => {
   text-decoration: none;
 }
 
-:global(.dark) .app-card {
-  background: rgba(0, 0, 0, 0.85);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow:
-    0 4px 16px 0 rgba(0, 0, 0, 0.4),
-    inset 0 1px 1px 0 rgba(255, 255, 255, 0.05);
-}
-
 .app-card:hover {
   transform: translateY(-6px) scale(1.02);
   box-shadow:
@@ -278,13 +259,6 @@ onUnmounted(() => {
   border-color: rgba(var(--color-primary-500), 0.6);
 }
 
-:global(.dark) .app-card:hover {
-  box-shadow:
-    0 12px 32px 0 rgba(var(--color-primary-500), 0.4),
-    0 0 0 1px rgba(var(--color-primary-500), 0.7),
-    inset 0 1px 1px 0 rgba(255, 255, 255, 0.1);
-}
-
 .app-card-content {
   display: flex;
   gap: 1rem;
@@ -331,10 +305,6 @@ onUnmounted(() => {
   line-height: 1.3;
 }
 
-:global(.dark) .app-name {
-  color: var(--color-gray-100);
-}
-
 .app-card:hover .app-name {
   color: rgb(var(--color-primary-500));
 }
@@ -365,10 +335,6 @@ onUnmounted(() => {
   overflow: hidden;
 }
 
-:global(.dark) .app-description {
-  color: var(--color-gray-400);
-}
-
 /* Responsive */
 @media (max-width: 640px) {
   .applications-container {
@@ -398,3 +364,41 @@ onUnmounted(() => {
   }
 }
 </style>
+
+<style>
+/* Estilos de modo oscuro (sin scoped para que .dark funcione correctamente) */
+.dark .applications-container {
+  background: rgba(0, 0, 0, 0.15) !important;
+  box-shadow:
+    0 8px 32px 0 rgba(0, 0, 0, 0.5),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.05) !important;
+  border: 1px solid rgba(255, 255, 255, 0.08) !important;
+}
+
+.dark .applications-title {
+  color: var(--color-gray-100) !important;
+}
+
+.dark .app-card {
+  background: rgba(0, 0, 0, 0.85) !important;
+  border: 1px solid rgba(255, 255, 255, 0.1) !important;
+  box-shadow:
+    0 4px 16px 0 rgba(0, 0, 0, 0.4),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.05) !important;
+}
+
+.dark .app-card:hover {
+  box-shadow:
+    0 12px 32px 0 rgba(var(--color-primary-500), 0.4),
+    0 0 0 1px rgba(var(--color-primary-500), 0.7),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.1) !important;
+}
+
+.dark .app-name {
+  color: var(--color-gray-100) !important;
+}
+
+.dark .app-description {
+  color: var(--color-gray-400) !important;
+}
+</style>