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.
import '@brainandbones/skeleton/themes/theme-{name}.css'; // <--
import '../app.postcss';Create your own custom theme.
Theme Colors
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.
<!-- Inlined classes -->
<div class="bg-primary-500 text-accent-500">Skeleton</div><!-- Tailwind opacity scale -->
<div class="bg-primary-500/50">Skeleton</div>/* Using Tailwind @apply */
.example { @apply bg-primary-500; }/* Using CSS custom properties */
body { background: var(--color-surface-900); }Here's a brief reference of what each color should represent within your project.
| 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. |
Design Tokens
Skeleton themes are paired with a powerful design token system to create utility classes based on theme settings. These cover common styles for backgrounds, border radius, fonts, and more. In fact, most components use these tokens as the default settings, which means components auto-adapt to your theme style with minimal configuration out of the box.
While we formalize this feature, please see the stylesheet directly as a source reference.
Tokens are avialable to use anywhere in your project. Here's a few examples:
<!-- Apply your theme's border radius value -->
<div class="w-10 h-10 bg-primary-500 rounded-token">Rounded</div><!-- Apply your theme's heading font -->
<span class="font-heading-token">Font Family</span><!-- Set the text color, which auto adjusts for light/dark modes -->
<span class="text-token">Skeleton</span>Next, let's create a simple project within one of Skeleton's supported frameworks.
Framework Guides