Theme Colors

This section provides a quick references for what each avialable theme color.

Name	Class	Description
Primary	[x]-primary-[50-900]	Typically your primary brand color.
Secondary	[x]-secondary-[50-900]	A secondary branding color for supplementary value.
Tertiary	[x]-tertiary-[50-900]	A third and additional branding color.
Success	[x]-success-[50-900]	Used for successful or positive actions, such as a form submit alert.
Warning	[x]-warning-[50-900]	Used for negative or harmful actions, such as errors.
Error	[x]-error-[50-900]	May be used for errors, alerts, and invalid inputs.
Surface	[x]-surface-[50-900]	The base level colors, using for your background, cards, and other layered elements.

Usage

Skeleton themes extend Tailwind's color palette and can be used anywhere within your project. Here's a few examples:

html

<!-- Inlined classes -->
<div class="bg-primary-500 text-secondary-500">Skeleton</div>

html

<!-- Tailwind opacity scale -->
<div class="border border-primary-500/50">Skeleton</div>

css

/* Using Tailwind @apply */
.example { @apply text-primary-500; }

css

/* Using CSS custom properties. Note that colors are RGB values! */
body { background: rgba(var(--color-surface-900) / 1); }