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

Use the theme picker at the top of the page to preview each option. Tap any theme automatically copy the import statement to your clipboard.

TIP: Want to clone and modify a preset theme? View these themes on GitHub.

The CLI will automatically import your selected theme into src/routes/+layout.svelte before your global stylesheet. You may change this at any time.

typescript 
import '@skeletonlabs/skeleton/themes/theme-skeleton.css'; // <--
import '../app.postcss';

Some preset themes include special styles, such as a background. To use these, set the data-theme attribute in your app.html body tag.

html 
<body data-theme="skeleton">

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 →