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

Fix: Agregar variables de tema a UCard en página de configuración
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 46s
Details

Browse Source 
- Configurar prop :ui en todos los UCard para usar variables CSS del tema
- Reemplazar colores hardcoded (amber, green) por variables de tema
- Los UCard ahora responden correctamente a cambios de tema
- Corrige problema donde los cards no cambiaban de color al seleccionar presets

Archivos modificados:
- app/pages/settings.vue: Agregar :ui prop con bg-[var(--brand-surface)] y border
This commit is contained in:
josedario87
2025-10-30 16:51:11 -06:00
parent 494ffb6d3b
commit 0a754958ae
1 changed files with 36 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
nuxt4-app/app/pages/settings.vue
View File

@@ -155,7 +155,14 @@ watch(() => theme.value, (newTheme) => {
<UDashboardPanelContent>
<div class="max-w-4xl mx-auto space-y-8">
<!-- Configuración de Tema -->
<UCard>
<UCard
:ui="{
base: 'bg-[var(--brand-surface)]',
ring: 'ring-1 ring-[var(--brand-border)]',
body: { base: '', padding: 'px-4 py-5 sm:p-6' },
header: { base: 'border-b border-[var(--brand-border)]', padding: 'px-4 py-5 sm:px-6' }
}"
>
<template #header>
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
@@ -463,7 +470,14 @@ watch(() => theme.value, (newTheme) => {
</UModal>
<!-- Vista previa de colores -->
<UCard>
<UCard
:ui="{
base: 'bg-[var(--brand-surface)]',
ring: 'ring-1 ring-[var(--brand-border)]',
body: { base: '', padding: 'px-4 py-5 sm:p-6' },
header: { base: 'border-b border-[var(--brand-border)]', padding: 'px-4 py-5 sm:px-6' }
}"
>
<template #header>
<div class="flex items-center gap-3">
<UIcon name="i-lucide-eye" class="size-5 text-[var(--brand-primary)]" />
@@ -495,11 +509,18 @@ watch(() => theme.value, (newTheme) => {
<!-- Otras configuraciones (placeholder) -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<UCard>
<UCard
:ui="{
base: 'bg-[var(--brand-surface)]',
ring: 'ring-1 ring-[var(--brand-border)]',
body: { base: '', padding: 'px-4 py-5 sm:p-6' },
header: { base: 'border-b border-[var(--brand-border)]', padding: 'px-4 py-5 sm:px-6' }
}"
>
<template #header>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-lg bg-amber-50 dark:bg-amber-950/30 flex items-center justify-center">
<UIcon name="i-lucide-bell" class="size-5 text-amber-600 dark:text-amber-400" />
<div class="w-10 h-10 rounded-lg bg-[var(--brand-primary)]/20 flex items-center justify-center">
<UIcon name="i-lucide-bell" class="size-5 text-[var(--brand-accent)]" />
</div>
<h3 class="font-semibold text-[var(--brand-text)]">
Notificaciones
@@ -511,11 +532,18 @@ watch(() => theme.value, (newTheme) => {
</p>
</UCard>
<UCard>
<UCard
:ui="{
base: 'bg-[var(--brand-surface)]',
ring: 'ring-1 ring-[var(--brand-border)]',
body: { base: '', padding: 'px-4 py-5 sm:p-6' },
header: { base: 'border-b border-[var(--brand-border)]', padding: 'px-4 py-5 sm:px-6' }
}"
>
<template #header>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-lg bg-green-50 dark:bg-green-950/30 flex items-center justify-center">
<UIcon name="i-lucide-shield" class="size-5 text-green-600 dark:text-green-400" />
<div class="w-10 h-10 rounded-lg bg-[var(--brand-primary)]/20 flex items-center justify-center">
<UIcon name="i-lucide-shield" class="size-5 text-[var(--brand-accent)]" />
</div>
<h3 class="font-semibold text-[var(--brand-text)]">
Privacidad