Themes - Skeleton

Themes are the heart of the Skeleton design system. They are created using CSS custom properties, but authored as CSS-in-JS to enable simple integration into the Skeleton Tailwind plugin. Allowing you to quickly pre-register and swap between themes on demand.

Preset Themes

Skeleton comes with a selection of high quality themes out of the box.

cerberus
catppuccin
pine
rose

TIP: Use the theme switcher on this documentation website to preview each theme.

To use preset themes, add the following import to the top of your tailwind.config, then refer to Register and Active below.

import * as themes from "@skeletonlabs/skeleton/themes";

Custom Themes

Optionally you can choose to generate a custom theme to match the unique branding and design required for your application. Skeleton provides a robust theme generator to simplify this process.

Theme Generator →

Open the Theme Generator and design your theme.
Tap the “code” view from the menu options at the top of the site.
Provide a unique name for your theme.
Copy the contents of the generated theme in full.
Create a new file in the root of your project called theme-custom.ts (this is up to you).

You may import your custom theme(s) at the top of your project’s tailwind.config, then refer to Register and Active below.

import { yourThemeNameHere } from './theme-custom.ts'

Register and Activate

Make sure you followed the import instructions above, then register all themes within the Skeleton Tailwind Plugin found within your project’s tailwind.config.

TIP: There’s no limited to how many themes you can enable, but each increases the size of your final CSS bundle.

plugins: [
    // The Skeleton Tailwind Plugin
    skeleton({
        themes: [
            // Preset Themes
            themes.cerberus,
            themes.pine,
            themes.rose,
            // Custom Themes
            yourThemeNameHere,
        ]
    })
]

Finally, you can set the current active theme using the data-theme attribute on <body> tag. If this doesn’t exist, add it.

<body data-theme="cerberus">...</body>

To switch themes, use the tools provided by your framework to modify the data attribute and apply a registered theme’s name.

Customizing Presets

You may update the CSS Custom Properties provided by Skeleton’s preset themes. Use the following syntax and apply these styles changes to your global stylesheet. This will target the root scope, a specific theme, and each theme property you wish to adjust.

:root [data-theme='cerberus'] {
    --base-font-family: system-ui;
    --heading-font-family: system-ui;
}

Enhancing Themes

While themes act as the foundation of your application’s style, they should not be seen as the only option for customizing your application. By combining Skeleton and Tailwind elements into grouped new utility classes, you can create complex styles.

Simple Card

This card will always use the same styles.

Enhanced Card

This card will have unique styles for the Cerberus and Catppuccin themes.

<div class="w-full space-y-4">
	<!-- All primitive styles inlined -->
	<div class="card preset-filled-surface-100-900 p-4 space-y-2">
		<p class="font-bold">Simple Card</p>
		<p>This card will always use the same styles.</p>
	</div>

	<!-- Uses a custom `.card-enhanced-example` class to enhance styles for select themes -->
	<div class="card-enhanced-example p-4 space-y-2">
		<p class="font-bold">Enhanced Card</p>
		<p>This card will have unique styles for the Cerberus and Catppuccin themes.</p>
	</div>
</div>

<style>
	.card-enhanced-example {
		@apply card preset-filled-surface-100-900;
	}
	/* Enhanced for the Cerberus theme only. */
	[data-theme='cerberus'] .card-enhanced-example {
		@apply ring-4 ring-primary-500;
	}
	/* Enhanced for the Catppuccin theme only. */
	[data-theme='catppuccin'] .card-enhanced-example {
		@apply preset-filled-primary-100-900 border border-primary-500 p-8;
	}
</style>

Please note that Tailwind discourages early abstraction. The @apply feature should not be used as a replacement for utility classes. However, grouping a small subset of utility classes for resusability is allowed. Use this technique with caution.

Custom Fonts

COMING SOON: we’ll provide a Cookbook article on this subject as instruction may vary per meta-framework.

API Reference

COMING SOON: please refer to the preset Cerberus theme, which contains inline documentation.