Theming

CSS-variable theming, light/dark, runtime switching and animations.

Theming

Everything is driven by CSS custom properties, so themes can change at runtime with no re-render.

Tokens

VariablePurpose
--sk-base-colorBone base color
--sk-highlight-colorHighlight/sweep color
--sk-dark-base-color / --sk-dark-highlight-colorDark-mode equivalents
--sk-radiusDefault bone radius
--sk-opacityResting opacity
--sk-durationAnimation cycle length

Light & dark

Dark colors activate automatically under the .dark selector (configurable via darkModeSelector) or [data-theme="dark"]. With Nuxt UI / @nuxtjs/color-mode, this is wired up for you.

Runtime switching

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

Scoped theme

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

Custom CSS

You can override the variables anywhere in your own CSS:

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

Animations

Built-in presets: wave, pulse, fade, gradient, shine, and none. Set the default in config (animation) or per-scope (<Skeletonizer animation="pulse">), and switch at runtime with setAnimation().

Register a custom animation

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')

All animations respect prefers-reduced-motion: reduce automatically.

Play with colors, animation and duration live in the Playground.