Themes

Skeleton themes integrate with Tailwind using CSS custom properties converted to RGB values. This enables the use of background opacity as well as support for dark mode. Components intelligently adapt to your theme color palette.

Select a Theme

Select from any of our curated preset themes or use the theme generator to create your own custom theme.

Tap any theme below to automatically copy the import statement to your clipboard.

Import your desired preset into src/routes/+layout.svelte.

typescript

import '@brainandbones/skeleton/themes/theme-{name}.css'; // <--
import '../app.postcss';

Create your own custom theme.

Themes Generator →

Usage

Theme colors are not limited to Skeleton components. You may utilize them anywhere within your app following Tailwind's standard conventions. Feel free to mix or extend them with Tailwind's default color palette.

html

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

html

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

css

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

css

/* Using CSS custom properties */
body { background: var(--color-surface-900); }

Reference

Here's a brief reference of what each color should represent within your project.

Name	Class	Description
Primary	[x]-primary-[50-900]	Typically your primary brand color.
Accent	[x]-accent-[50-900]	An accent for offsets or supplementary values.
Ternary	[x]-ternary-[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.

Next, let's review best practices for handling CSS styles and overrides.

Styles and Stylesheets