Theme Styles
Theme Colors
Here's a quick reference for what each theme color represents.
| Color | Name | Class | Description |
|---|---|---|---|
| Primary | [x]-primary-[50-900] | Typically your primary brand color. | |
| Accent | [x]-accent-[50-900] | A secondary offset color or supplementary value. | |
| Tertiary | [x]-tertiary-[50-900] | A third and additional offset color. Great for informational alerts. | |
| Warning | [x]-warning-[50-900] | May be used for warnings, alerts, and invalid inputs. | |
| Surface | [x]-surface-[50-900] | May be used for backgrounds, card elements, and some typography. |
Skeleton themes extend Tailwind's color palette and can be used anywhere within your project. Here's a few examples:
<!-- Inlined classes -->
<div class="bg-primary-500 text-accent-500">Skeleton</div><!-- Tailwind opacity scale -->
<div class="border border-primary-500/50">Skeleton</div>/* Using Tailwind @apply */
.example { @apply text-primary-500; }/* Using CSS custom properties. Note that colors are RGB values! */
body { background: rgba(var(--color-surface-900) / 1); }Design Tokens
Preset utility classes based on your theme CSS property settings.