Temi

Temi via variabili CSS, chiaro/scuro, cambio a runtime e animazioni.

Temi

Tutto è guidato da proprietà personalizzate CSS, così i temi possono cambiare a runtime senza alcun re-render.

Token

VariabileScopo
--sk-base-colorColore base dell'osso
--sk-highlight-colorColore di evidenziazione/sweep
--sk-dark-base-color / --sk-dark-highlight-colorEquivalenti per la modalità scura
--sk-radiusRaggio predefinito dell'osso
--sk-opacityOpacità a riposo
--sk-durationDurata del ciclo di animazione

Chiaro & scuro

I colori scuri si attivano automaticamente sotto il selettore .dark (configurabile tramite darkModeSelector) o [data-theme="dark"]. Con Nuxt UI / @nuxtjs/color-mode è già configurato.

Cambio a runtime

const { setTheme } = useSkeletonizer()
setTheme({ baseColor: '#1f2937', highlightColor: '#374151' })

Tema scoped

<Skeletonizer :enabled="pending" :theme="{ baseColor: '#fde68a' }">
  <PromoBanner />
</Skeletonizer>

CSS personalizzato

Puoi sovrascrivere le variabili ovunque nel tuo CSS:

:root {
  --sk-base-color: #e2e8f0;
  --sk-highlight-color: #f1f5f9;
  --sk-radius: 8px;
}

Animazioni

Preset integrati: wave, pulse, fade, gradient, shine e none. Imposta il predefinito in config (animation) o per-scope (<Skeletonizer animation="pulse">), e cambialo a runtime con setAnimation().

Registrare un'animazione personalizzata

useSkeletonizer().registerAnimation({
  name: 'blink',
  css: `
    @keyframes sk-blink { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
    .sk-anim-blink .sk-bone { animation: sk-blink var(--sk-duration) infinite }
  `,
})
useSkeletonizer().setAnimation('blink')

Tutte le animazioni rispettano automaticamente prefers-reduced-motion: reduce.

Gioca con colori, animazione e durata dal vivo nel Playground.