Feat: Implementar personalización de color principal del tema

- 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/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,
+  }
+}