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.

Create a Theme

Preset Themes

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';

See Also

Learn more about Skeleton's theme color system.

Theme Colors →

Learn more about Skeleton's design token sytem.

Design Tokens →

Next, let's learn more about styling Skeleton.

Styling →