Feat: Extender personalización de colores a fuente y fondo

- Modificar useColorCustomization para manejar tres colores (primary, foreground, background)
- Actualizar interfaz ThemeColors con los tres colores
- Agregar selectores de color para fuente y fondo en el modal
- Implementar vista previa con los tres colores aplicados
- Actualizar funciones setCustomColors y resetColors para manejar múltiples colores
- Mantener almacenamiento separado por tema (light/dark)
- Aplicar colores a variables --cata-fg y --cata-bg además de --cata-primary

nuxt4/app/components/cata/UserInfo.vue

@@ -37,21 +37,42 @@
 
             <!-- Modal body -->
             <template #body>
-              <!-- Color picker -->
+              <!-- Color Principal -->
-              <div class="mb-6">
+              <div class="mb-4">
                 <label class="cata-text text-sm font-medium mb-2 block">
                   Color Principal
                 </label>
                 <div class="flex items-center gap-3">
                   <input
                     type="color"
-                    v-model="colorSeleccionado"
+                    v-model="colorPrimario"
                     class="color-picker"
-                    @change="previsualizarColor"
                   />
                   <input
                     type="text"
-                    v-model="colorSeleccionado"
+                    v-model="colorPrimario"
+                    class="cata-input flex-1 px-3 py-2 rounded-md"
+                    placeholder="#4682B4"
+                    maxlength="7"
+                    pattern="^#[0-9A-Fa-f]{6}$"
+                  />
+                </div>
+              </div>
+
+              <!-- Color de Fuente -->
+              <div class="mb-4">
+                <label class="cata-text text-sm font-medium mb-2 block">
+                  Color de Fuente
+                </label>
+                <div class="flex items-center gap-3">
+                  <input
+                    type="color"
+                    v-model="colorFuente"
+                    class="color-picker"
+                  />
+                  <input
+                    type="text"
+                    v-model="colorFuente"
                     class="cata-input flex-1 px-3 py-2 rounded-md"
                     placeholder="#000000"
                     maxlength="7"
@@ -60,18 +81,51 @@
                 </div>
               </div>
 
-              <!-- Vista previa del color -->
+              <!-- Color de Fondo -->
+              <div class="mb-6">
+                <label class="cata-text text-sm font-medium mb-2 block">
+                  Color de Fondo
+                </label>
+                <div class="flex items-center gap-3">
+                  <input
+                    type="color"
+                    v-model="colorFondo"
+                    class="color-picker"
+                  />
+                  <input
+                    type="text"
+                    v-model="colorFondo"
+                    class="cata-input flex-1 px-3 py-2 rounded-md"
+                    placeholder="#ffffff"
+                    maxlength="7"
+                    pattern="^#[0-9A-Fa-f]{6}$"
+                  />
+                </div>
+              </div>
+
+              <!-- Vista previa -->
               <div class="mb-6">
                 <p class="cata-text text-sm font-medium mb-2">
                   Vista previa
                 </p>
-                <div class="preview-box cata-outline-box rounded-md p-4">
+                <div
+                  class="preview-box cata-outline-box rounded-md p-4"
+                  :style="{
+                    backgroundColor: colorFondo,
+                    borderColor: colorPrimario
+                  }"
+                >
+                  <p
+                    class="text-sm mb-2"
+                    :style="{ color: colorFuente }"
+                  >
+                    Texto de ejemplo
+                  </p>
                   <button
                     class="cata-button px-4 py-2"
                     :style="{
-                      '--preview-color': colorSeleccionado,
+                      borderColor: colorPrimario,
-                      borderColor: colorSeleccionado,
+                      color: colorPrimario
-                      color: colorSeleccionado
                     }"
                   >
                     Botón de ejemplo
@@ -84,9 +138,9 @@
             <template #footer>
               <div class="flex items-center justify-end gap-2 w-full">
                 <button
-                  v-if="hasCustomColor"
+                  v-if="hasCustomColors"
                   class="cata-button px-4 py-2"
-                  @click="resetearColor"
+                  @click="resetearColores"
                 >
                   Restablecer
                 </button>
@@ -98,7 +152,7 @@
                 </button>
                 <button
                   class="cata-button px-4 py-2"
-                  @click="aplicarColor"
+                  @click="aplicarColores"
                 >
                   Aplicar
                 </button>
@@ -141,18 +195,22 @@
 <script setup lang="ts">
 const { user, checkSessionStatus } = useAuthentik()
 const colorMode = useColorMode()
-const { getCurrentColor, hasCustomColor, setCustomColor, resetColor } = useColorCustomization()
+const { getCurrentColors, hasCustomColors, setCustomColors, resetColors } = useColorCustomization()
 
 // Estado del tema
 const isDark = computed(() => colorMode.value === 'dark')
 
 // Estado del modal de color picker
 const mostrarColorPicker = ref(false)
-const colorSeleccionado = ref(getCurrentColor.value)
+const colorPrimario = ref(getCurrentColors.value.primary)
+const colorFuente = ref(getCurrentColors.value.foreground)
+const colorFondo = ref(getCurrentColors.value.background)
 
-// Actualizar color seleccionado cuando cambia el tema
+// Actualizar colores seleccionados cuando cambia el tema
-watch(getCurrentColor, (newColor) => {
+watch(getCurrentColors, (newColors) => {
-  colorSeleccionado.value = newColor
+  colorPrimario.value = newColors.primary
+  colorFuente.value = newColors.foreground
+  colorFondo.value = newColors.background
 })
 
 // Obtener la inicial del usuario
@@ -183,21 +241,19 @@ const handleLogout = () => {
   window.location.href = '/outpost.goauthentik.io/sign_out'
 }
 
-// Previsualizar color
+// Aplicar colores personalizados
-const previsualizarColor = () => {
+const aplicarColores = () => {
-  // La vista previa se maneja con el binding :style en el template
+  setCustomColors(colorPrimario.value, colorFuente.value, colorFondo.value)
-}
-
-// Aplicar color personalizado
-const aplicarColor = () => {
-  setCustomColor(colorSeleccionado.value)
   mostrarColorPicker.value = false
 }
 
-// Resetear color al por defecto
+// Resetear colores a los por defecto
-const resetearColor = () => {
+const resetearColores = () => {
-  resetColor()
+  resetColors()
-  colorSeleccionado.value = getCurrentColor.value
+  const colors = getCurrentColors.value
+  colorPrimario.value = colors.primary
+  colorFuente.value = colors.foreground
+  colorFondo.value = colors.background
 }
 </script>