Styling & Customization Guide

1. CSS Custom Properties

ngx-skeleton-suite uses native CSS variables for instant live theme customization without needing recompilation:

CSS Custom Property	Default Fallback	Purpose
--ngx-skeleton-base-color	#e2e8f0	Base background color of skeleton shapes
--ngx-skeleton-highlight-color	rgba(255,255,255,0.6)	Shimmer / wave gradient highlight color
--ngx-skeleton-border-radius	0.375rem	Border radius applied to skeleton shapes
--ngx-skeleton-animation-duration	1.5s	Wave / pulse animation speed

Example: Dark Mode Overrides

styles.css

:root {
  --ngx-skeleton-base-color: #1e293b;
  --ngx-skeleton-highlight-color: rgba(255, 255, 255, 0.15);
  --ngx-skeleton-border-radius: 0px;
}

---

2. Directive Inline Inputs

Override dimensions or shapes directly on individual directive instances:

<div *skeleton="isLoading; width: '200px'; height: '40px'; shape: 'rectangle'; borderRadius: '8px'">
  <button class="submit-btn">SUBMIT ORDER</button>
</div>

---

3. SCSS Class Overrides

Target skeleton shapes through the renderer-neutral .ngx-skeleton-shape hook. This works with every adapter (native, PrimeNG, Material):

.custom-card-skeleton {
  .ngx-skeleton-shape {
    background-color: #0a0a0a !important;
    border: 1px solid #ef4444 !important;
  }
}

The PrimeNG adapter additionally renders .p-skeleton, and the Material adapter renders ngx-skeleton-loader, so adapter-specific selectors remain available when you need them.

<div *skeleton="isLoading; styleClass: 'custom-card-skeleton'">
  <div class="card">...</div>
</div>