From b4cad994190b05503a3a0d742b092d2fd85c5007 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sat, 18 Oct 2025 03:02:30 -0600
Subject: [PATCH] =?UTF-8?q?Feat:=20Implementar=20personalizaci=C3=B3n=20de?=
 =?UTF-8?q?=20color=20principal=20del=20tema?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Crear composable useColorCustomization para manejar colores personalizados
- Agregar botón de paleta en CataUserInfo para acceder al color picker
- Implementar modal con selector de color (input color + text)
- Guardar preferencias en localStorage por tema (light/dark)
- Generar paleta de gradientes automáticamente desde color base
- Aplicar colores dinámicamente a variables CSS
- Incluir vista previa del color en el modal
- Botón para restablecer al color por defecto
- Persistencia de colores entre sesiones
- Inicialización automática en app.vue
---
 nuxt4/app/app.vue                             |   6 +
 nuxt4/app/components/cata/UserInfo.vue        | 172 ++++++++++++++
 .../app/composables/useColorCustomization.ts  | 224 ++++++++++++++++++
 3 files changed, 402 insertions(+)
 create mode 100644 nuxt4/app/composables/useColorCustomization.ts

diff --git a/nuxt4/app/app.vue b/nuxt4/app/app.vue
index c648ef0..d315aa5 100644
--- a/nuxt4/app/app.vue
+++ b/nuxt4/app/app.vue
@@ -8,6 +8,12 @@
 
 <script setup lang="ts">
 const { isAuthenticated } = useAuthentik()
+const { inicializar } = useColorCustomization()
+
+// Inicializar personalización de colores
+onMounted(() => {
+  inicializar()
+})
 
 // Configurar meta tags para PWA
 useHead({
diff --git a/nuxt4/app/components/cata/UserInfo.vue b/nuxt4/app/components/cata/UserInfo.vue
index 9d6d296..5205250 100644
--- a/nuxt4/app/components/cata/UserInfo.vue
+++ b/nuxt4/app/components/cata/UserInfo.vue
@@ -25,6 +25,15 @@
 
         <!-- Botones de acción -->
         <div class="flex items-center gap-2">
+          <!-- Botón de personalización de color -->
+          <button
+            class="cata-button p-2 flex items-center justify-center flex-shrink-0"
+            @click="mostrarColorPicker = true"
+            title="Personalizar color del tema"
+          >
+            <UIcon name="i-lucide-palette" class="w-4 h-4" />
+          </button>
+
           <!-- Botón de cambio de tema -->
           <button
             class="cata-button p-2 flex items-center justify-center flex-shrink-0"
@@ -54,16 +63,103 @@
         </div>
       </div>
     </div>
+
+    <!-- Modal de personalización de color -->
+    <UModal v-model:open="mostrarColorPicker">
+      <div class="cata-outline-box rounded-lg p-6">
+        <h3 class="cata-text text-lg font-semibold mb-4">
+          Personalizar Color del Tema
+        </h3>
+        <p class="cata-text text-sm opacity-75 mb-4">
+          Selecciona un color para el tema {{ isDark ? 'oscuro' : 'claro' }}
+        </p>
+
+        <!-- Color picker -->
+        <div class="mb-6">
+          <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"
+              class="color-picker"
+              @change="previsualizarColor"
+            />
+            <input
+              type="text"
+              v-model="colorSeleccionado"
+              class="cata-input flex-1 px-3 py-2 rounded-md"
+              placeholder="#000000"
+              maxlength="7"
+              pattern="^#[0-9A-Fa-f]{6}$"
+            />
+          </div>
+        </div>
+
+        <!-- Vista previa del color -->
+        <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">
+            <button
+              class="cata-button px-4 py-2"
+              :style="{
+                '--preview-color': colorSeleccionado,
+                borderColor: colorSeleccionado,
+                color: colorSeleccionado
+              }"
+            >
+              Botón de ejemplo
+            </button>
+          </div>
+        </div>
+
+        <!-- Botones de acción -->
+        <div class="flex items-center justify-end gap-2">
+          <button
+            v-if="hasCustomColor"
+            class="cata-button px-4 py-2"
+            @click="resetearColor"
+          >
+            Restablecer
+          </button>
+          <button
+            class="cata-button px-4 py-2"
+            @click="mostrarColorPicker = false"
+          >
+            Cancelar
+          </button>
+          <button
+            class="cata-button px-4 py-2"
+            @click="aplicarColor"
+          >
+            Aplicar
+          </button>
+        </div>
+      </div>
+    </UModal>
   </div>
 </template>
 
 <script setup lang="ts">
 const { user, checkSessionStatus } = useAuthentik()
 const colorMode = useColorMode()
+const { getCurrentColor, hasCustomColor, setCustomColor, resetColor } = 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)
+
+// Actualizar color seleccionado cuando cambia el tema
+watch(getCurrentColor, (newColor) => {
+  colorSeleccionado.value = newColor
+})
+
 // Obtener la inicial del usuario
 const userInitial = computed(() => {
   if (!user.value) return '?'
@@ -91,6 +187,23 @@ const handleLogout = () => {
   // Redirigir al endpoint de logout de Authentik
   window.location.href = '/outpost.goauthentik.io/sign_out'
 }
+
+// Previsualizar color
+const previsualizarColor = () => {
+  // La vista previa se maneja con el binding :style en el template
+}
+
+// Aplicar color personalizado
+const aplicarColor = () => {
+  setCustomColor(colorSeleccionado.value)
+  mostrarColorPicker.value = false
+}
+
+// Resetear color al por defecto
+const resetearColor = () => {
+  resetColor()
+  colorSeleccionado.value = getCurrentColor.value
+}
 </script>
 
 <style scoped>
@@ -124,6 +237,65 @@ const handleLogout = () => {
   box-shadow: 0 0 12px color-mix(in srgb, var(--cata-primary) 30%, transparent);
 }
 
+/* Color picker */
+.color-picker {
+  width: 3rem;
+  height: 3rem;
+  border: 2px solid color-mix(in srgb, var(--cata-primary) 50%, transparent);
+  border-radius: 0.375rem;
+  cursor: pointer;
+  background-color: transparent;
+  transition: border-color 200ms;
+}
+
+.color-picker:hover {
+  border-color: color-mix(in srgb, var(--cata-primary) 70%, transparent);
+}
+
+.dark .color-picker {
+  border-color: var(--cata-primary);
+}
+
+.dark .color-picker:hover {
+  box-shadow: 0 0 8px color-mix(in srgb, var(--cata-primary) 30%, transparent);
+}
+
+/* Input de texto para color */
+.cata-input {
+  background-color: transparent;
+  border: 2px solid color-mix(in srgb, var(--cata-primary) 30%, transparent);
+  color: var(--cata-fg);
+  transition: border-color 200ms, box-shadow 200ms;
+}
+
+.cata-input:focus {
+  outline: none;
+  border-color: color-mix(in srgb, var(--cata-primary) 70%, transparent);
+}
+
+.dark .cata-input {
+  border-color: color-mix(in srgb, var(--cata-primary) 50%, transparent);
+  font-family: 'Roboto Mono', monospace;
+}
+
+.dark .cata-input:focus {
+  border-color: var(--cata-primary);
+  box-shadow: 0 0 8px color-mix(in srgb, var(--cata-primary) 20%, transparent);
+}
+
+/* Preview box */
+.preview-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 4rem;
+  background-color: color-mix(in srgb, var(--cata-primary) 2%, transparent);
+}
+
+.dark .preview-box {
+  background-color: color-mix(in srgb, var(--cata-primary) 5%, transparent);
+}
+
 /* Responsive adjustments */
 @media (max-width: 640px) {
   .user-avatar {
diff --git a/nuxt4/app/composables/useColorCustomization.ts b/nuxt4/app/composables/useColorCustomization.ts
new file mode 100644
index 0000000..ac03c0b
--- /dev/null
+++ b/nuxt4/app/composables/useColorCustomization.ts
@@ -0,0 +1,224 @@
+/**
+ * Composable para personalización del color principal del tema
+ * Guarda la preferencia en localStorage y aplica los gradientes dinámicamente
+ */
+
+interface ColorHSL {
+  h: number
+  s: number
+  l: number
+}
+
+/**
+ * Convierte un color hex a HSL
+ */
+function hexToHSL(hex: string): ColorHSL {
+  // Remover el # si existe
+  hex = hex.replace('#', '')
+
+  // Convertir a RGB
+  const r = parseInt(hex.substring(0, 2), 16) / 255
+  const g = parseInt(hex.substring(2, 4), 16) / 255
+  const b = parseInt(hex.substring(4, 6), 16) / 255
+
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  let h = 0
+  let s = 0
+  const l = (max + min) / 2
+
+  if (max !== min) {
+    const d = max - min
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6
+        break
+      case g:
+        h = ((b - r) / d + 2) / 6
+        break
+      case b:
+        h = ((r - g) / d + 4) / 6
+        break
+    }
+  }
+
+  return {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100),
+  }
+}
+
+/**
+ * Genera una paleta de colores basada en el color base
+ */
+function generateColorPalette(baseColor: string): Record<string, string> {
+  const hsl = hexToHSL(baseColor)
+
+  // Generar escala de luminosidad
+  const palette: Record<string, string> = {
+    50: `${hsl.h} ${Math.min(100, hsl.s + 20)}% 95%`,
+    100: `${hsl.h} ${Math.min(100, hsl.s + 15)}% 90%`,
+    200: `${hsl.h} ${Math.min(100, hsl.s + 10)}% 80%`,
+    300: `${hsl.h} ${hsl.s}% 70%`,
+    400: `${hsl.h} ${hsl.s}% 60%`,
+    500: `${hsl.h} ${hsl.s}% ${hsl.l}%`, // Base
+    600: `${hsl.h} ${Math.max(0, hsl.s - 5)}% ${Math.max(0, hsl.l - 10)}%`,
+    700: `${hsl.h} ${Math.max(0, hsl.s - 10)}% ${Math.max(0, hsl.l - 20)}%`,
+    800: `${hsl.h} ${Math.max(0, hsl.s - 15)}% ${Math.max(0, hsl.l - 30)}%`,
+    900: `${hsl.h} ${Math.max(0, hsl.s - 20)}% ${Math.max(0, hsl.l - 40)}%`,
+    950: `${hsl.h} ${Math.max(0, hsl.s - 25)}% ${Math.max(0, hsl.l - 45)}%`,
+  }
+
+  return palette
+}
+
+/**
+ * Aplica el color personalizado a las variables CSS
+ */
+function applyCustomColor(color: string, isDark: boolean) {
+  if (import.meta.server) return
+
+  const hsl = hexToHSL(color)
+  const palette = generateColorPalette(color)
+
+  // Aplicar color principal
+  document.documentElement.style.setProperty('--cata-primary', `${hsl.h} ${hsl.s}% ${hsl.l}%`)
+
+  // Aplicar paleta completa
+  Object.entries(palette).forEach(([key, value]) => {
+    document.documentElement.style.setProperty(`--color-primary-${key}`, value)
+  })
+
+  // Ajustar border y otros colores derivados según el modo
+  if (isDark) {
+    document.documentElement.style.setProperty('--cata-border', `${hsl.h} 100% 40%`)
+    document.documentElement.style.setProperty('--cata-muted', `${hsl.h} 80% 30%`)
+  } else {
+    document.documentElement.style.setProperty('--cata-border', `${hsl.h} 50% 70%`)
+    document.documentElement.style.setProperty('--cata-muted', `${hsl.h} 30% 40%`)
+  }
+}
+
+/**
+ * Colores por defecto según el tema
+ */
+const DEFAULT_COLORS = {
+  light: '#4682B4', // SteelBlue
+  dark: '#00FF00',  // Verde terminal
+}
+
+const STORAGE_KEY = 'riocata-custom-colors'
+
+export const useColorCustomization = () => {
+  const colorMode = useColorMode()
+  const isDark = computed(() => colorMode.value === 'dark')
+
+  // Estado reactivo del color personalizado
+  const customColors = useState<{ light: string | null; dark: string | null }>(
+    'custom-colors',
+    () => ({ light: null, dark: null })
+  )
+
+  /**
+   * Carga los colores personalizados desde localStorage
+   */
+  const loadCustomColors = () => {
+    if (import.meta.server) return
+
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY)
+      if (stored) {
+        const colors = JSON.parse(stored)
+        customColors.value = colors
+      }
+    } catch (error) {
+      console.error('Error al cargar colores personalizados:', error)
+    }
+  }
+
+  /**
+   * Guarda los colores personalizados en localStorage
+   */
+  const saveCustomColors = () => {
+    if (import.meta.server) return
+
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(customColors.value))
+    } catch (error) {
+      console.error('Error al guardar colores personalizados:', error)
+    }
+  }
+
+  /**
+   * Establece un color personalizado para el tema actual
+   */
+  const setCustomColor = (color: string) => {
+    if (import.meta.server) return
+
+    const theme = isDark.value ? 'dark' : 'light'
+    customColors.value[theme] = color
+    saveCustomColors()
+    applyCustomColor(color, isDark.value)
+  }
+
+  /**
+   * Resetea el color al valor por defecto del tema actual
+   */
+  const resetColor = () => {
+    if (import.meta.server) return
+
+    const theme = isDark.value ? 'dark' : 'light'
+    customColors.value[theme] = null
+    saveCustomColors()
+    applyCustomColor(DEFAULT_COLORS[theme], isDark.value)
+  }
+
+  /**
+   * Obtiene el color actual (personalizado o por defecto)
+   */
+  const getCurrentColor = computed(() => {
+    const theme = isDark.value ? 'dark' : 'light'
+    return customColors.value[theme] || DEFAULT_COLORS[theme]
+  })
+
+  /**
+   * Verifica si hay un color personalizado para el tema actual
+   */
+  const hasCustomColor = computed(() => {
+    const theme = isDark.value ? 'dark' : 'light'
+    return customColors.value[theme] !== null
+  })
+
+  /**
+   * Inicializa el composable
+   */
+  const inicializar = () => {
+    if (import.meta.server) return
+
+    loadCustomColors()
+
+    // Aplicar el color personalizado si existe
+    const theme = isDark.value ? 'dark' : 'light'
+    const color = customColors.value[theme] || DEFAULT_COLORS[theme]
+    applyCustomColor(color, isDark.value)
+
+    // Observar cambios en el modo de color
+    watch(isDark, (newIsDark) => {
+      const theme = newIsDark ? 'dark' : 'light'
+      const color = customColors.value[theme] || DEFAULT_COLORS[theme]
+      applyCustomColor(color, newIsDark)
+    })
+  }
+
+  return {
+    customColors: readonly(customColors),
+    getCurrentColor,
+    hasCustomColor,
+    setCustomColor,
+    resetColor,
+    inicializar,
+  }
+}