Themes

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

Theme Generator

This tool allows you to generate a custom Skeleton 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 '@skeletonlabs/skeleton/themes/theme-skeleton.css'; // <--
import '../app.postcss';

Learn how to use theme styles within your project.

Next, let's learn more about styling Skeleton.