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.

The CLI will automatically import your selected theme into src/routes/+layout.svelte, just before your global stylesheet app.postcss.

Prest themes can be found on GitHub if you wish to clone and modify them.

Theme Extras

Optional

Preset themes include custom fonts, background gradients, and other bonus features. You may enable these by pairing with the matching data-theme attribute in your app.html body tag. Selecting a theme preset above will update the snippet below.

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 →