Skip to content

Configuration

TSkeleton can be themed at three levels. From highest to lowest priority:

  1. Per-instance attributes on the <skeleton-*> element.
  2. CSS custom properties set on the element or any ancestor.
  3. Global defaults set with configure().

Table of Contents

Theming attributes

Every skeleton element accepts the following attributes. They map to CSS custom properties on the host element, so they win over configure() and CSS variables, and changes apply live.

Attribute CSS variable Default Description
variant — pulse Animation: pulse, shimmer or none
color --sk-color #e5e7eb Base skeleton block color
color-dark --sk-color-dark #d1d5db Darker blocks
color-light --sk-color-light #f3f4f6 Lighter blocks
highlight --sk-highlight rgba(255,255,255,.6) Shimmer sweep color
radius --sk-radius 4px Block border radius
duration --sk-duration 2s Pulse/shimmer animation duration
card-bg --sk-card-bg #ffffff Card background
card-radius --sk-card-radius 8px / 12px Card border radius 
<skeleton-facebook
  variant="shimmer"
  color="#f43f5e"
  color-dark="#fb7185"
  color-light="#ffe4e6"
  highlight="#ffffff"
  radius="8px"
  duration="1.2s"
  card-bg="#fff7ed"
  card-radius="16px"
></skeleton-facebook>

CSS variables

Components render in shadow DOM but inherit CSS custom properties, so you can theme them from plain CSS on the element or any ancestor:

skeleton-facebook {
  --sk-color: #e5e7eb;
  --sk-color-dark: #d1d5db;
  --sk-color-light: #f3f4f6;
  --sk-highlight: rgba(255, 255, 255, 0.6);
  --sk-radius: 4px;
  --sk-duration: 2s;
  --sk-card-bg: #ffffff;
  --sk-card-radius: 8px;
}

Global configure()

configure(theme) sets the CSS variables on :root, so every skeleton inherits them unless a more specific value exists.

import { configure } from 'tskeleton'

configure({
  color: '#e5e7eb',
  colorDark: '#d1d5db',
  colorLight: '#f3f4f6',
  highlight: 'rgba(255,255,255,.6)',
  radius: '4px',
  duration: '2s',
  cardBg: '#ffffff',
  cardRadius: '8px',
})

configure() is SSR-safe: it no-ops when document is not available. See the API Reference for the full signature.

Variant: pulse, shimmer, none

The variant attribute (or data-variant on the host) switches the animation:

  • pulse (default) — the block fades in opacity via the sk-pulse keyframes.
  • shimmer — a highlight sweep moves across every block via the sk-shimmer keyframes.
  • none — all animation is disabled.
<skeleton-youtube variant="none"></skeleton-youtube>

Deep styling with ::part()

Each built-in template exposes CSS parts so you can target specific pieces from outside the shadow DOM:

Part Applies to
card The outer card container
avatar Circular profile/avatar blocks
media Large image / thumbnail / cover blocks
shimmer Blocks with the shimmer effect
line Text-line blocks (titles, body lines) 
skeleton-facebook::part(card) { box-shadow: none; }
skeleton-facebook::part(avatar) { border-radius: 12px; }
skeleton-facebook::part(media) { border-radius: 16px; }
skeleton-facebook::part(line) { opacity: 0.6; }

Back to README