Themes

Skeleton themes integrate with Tailwind using CSS custom properties. Themes support color opacity, dark mode, and the design token system

Theme Generator

This tool provides a means to generate a custom theme.

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

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

typescript

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

View recommendations for utilizing theme styles within your application.

Next, let's learn more about styling Skeleton.