Theme Colors

This section provides a quick reference of each available theme color and their intended uses.


ColorIDExampleDescription
primary [style]-primary-[50-900] Typically your primary brand color.
secondary [style]-secondary-[50-900] A secondary branding color for supplementary value.
tertiary [style]-tertiary-[50-900] A third and additional branding color.
success [style]-success-[50-900] Used for successful or positive actions, such as a form submit alert.
warning [style]-warning-[50-900] Used for negative or harmful actions, such as errors.
error [style]-error-[50-900] May be used for errors, alerts, and invalid inputs.
surface [style]-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); }