Theming

Skelly elements are styled using standard CSS custom properties. By redefining these variables in your root stylesheet, they automatically inherit your brand theme (including dark mode configurations).

:root {
  --skelly-base: #E4E2DC;
  --skelly-highlight: #F5F4F0;
  --skelly-radius: 5px;
  --skelly-speed: 1.4s;

  /* structure: "surface" backing plates */
  --skelly-surface: rgba(28, 28, 26, 0.03);
  --skelly-surface-border: rgba(28, 28, 26, 0.08);

  /* visual: "optimistic" */
  --skelly-optimistic: rgba(79, 70, 229, 0.16);
}

CSS Variable tokens

• --skelly-base: The main background color of the skeleton placeholder shapes (e.g. #E4E2DC).
• --skelly-highlight: The swipe gradient flash color used for shimmer animations (e.g. #F5F4F0).
• --skelly-radius: Global border-radius mapping applied to block shapes.
• --skelly-speed: The cycle duration of shimmer or pulse animations (e.g. 1.4s).