@pzeta/vue-components
Services

useThemeColors

Composable per modificare dinamicamente i colori del tema a runtime tramite CSS custom properties.

Firma TypeScript

export function useThemeColors(): {
  setPrimaryColor: (preset: PrimaryColorPreset) => void;
  setPrimaryColorCustom: (shades: ColorShades) => void;
  resetPrimaryColor: () => void;
  getCurrentPrimaryColor: (shade?: keyof ColorShades) => string;
  setPrimaryShade: (shade: keyof ColorShades, color: string) => void;
  primaryColorPresets: typeof primaryColorPresets;
}

export type PrimaryColorPreset = 'blue' | 'purple' | 'green' | 'orange' | 'red' | 'pink' | 'teal'

export interface ColorShades {
  50: string; 100: string; 200: string; 300: string; 400: string;
  500: string; 600: string; 700: string; 800: string; 900: string; 950: string;
}

Parametri

Nessun parametro.

Valore di Ritorno

ProprietàTipoDescrizione
setPrimaryColor(preset: PrimaryColorPreset) => voidApplica un preset colore predefinito
setPrimaryColorCustom(shades: ColorShades) => voidImposta una palette completa personalizzata
resetPrimaryColor() => voidRipristina il colore di default (blue)
getCurrentPrimaryColor(shade?: keyof ColorShades) => stringLegge il valore corrente di una sfumatura (default: 500)
setPrimaryShade(shade: keyof ColorShades, color: string) => voidModifica una singola sfumatura
primaryColorPresetsRecord<PrimaryColorPreset, ColorShades>Oggetto con tutti i preset disponibili

Esempio

import { useThemeColors } from '@pzeta/vue-components'

const theme = useThemeColors()

// Cambia tema con preset predefinito
theme.setPrimaryColor('purple')

// Palette completamente personalizzata
theme.setPrimaryColorCustom({
  50: '#faf5ff',
  100: '#f3e8ff',
  200: '#e9d5ff',
  300: '#d8b4fe',
  400: '#c084fc',
  500: '#a855f7',
  600: '#9333ea',
  700: '#7e22ce',
  800: '#6b21a8',
  900: '#581c87',
  950: '#3b0764'
})

// Lettura colore corrente
const baseColor = theme.getCurrentPrimaryColor(500)

// Modifica singola sfumatura
theme.setPrimaryShade(600, '#2563eb')

// Ripristina default
theme.resetPrimaryColor()

Prerequisiti

Nessun prerequisito specifico. Il composable opera direttamente su document.documentElement tramite style.setProperty. Richiede che il tema della libreria usi le CSS custom properties --color-primary-{shade}.

Note

  • Preset disponibili: blue (default), purple, green, orange, red, pink, teal.
  • Le scale di sfumature vanno da 50 (più chiaro) a 950 (più scuro), seguendo la convenzione Tailwind CSS.
  • Le modifiche sono immediate e non richiedono ricaricamento della pagina.
  • I valori vengono applicati come CSS custom properties a livello :root, quindi si propagano a tutta l'applicazione.
  • Non persiste le modifiche: al refresh della pagina si torna al default. Per la persistenza, salvare la scelta in localStorage e richiamare setPrimaryColor al mount.

useConfirmPopup

Composable per popup di conferma contestuale ancorato all'elemento trigger.

useToast

Composable per mostrare notifiche toast tramite pattern inject/provide.