nucleo000/perfil
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Sincronizar tema con clase dark de Nuxt UI y arreglar selectores CSS
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 55s
Details

Browse Source 
- 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
This commit is contained in:
josedario87
2025-10-16 22:26:50 -06:00
parent 00c9d9578a
commit 16f74829a6
3 changed files with 100 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
nuxt4/app/components/UserHeader.vue
View File

@@ -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>