Themes - Skeleton

Themes are the heart of the Skeleton’s design system, empowered by CSS custom properties, authored as CSS-in-JS to enable simple integration into Skeleton’s Tailwind plugin. Which allows for simple pre-registration and switching on demand.

Preset Themes

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

cerberus
catppuccin
pine
rose

Add the following import to the top of your tailwind.config, then continue to the register instructions below.

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

Custom Themes

Optionally you can choose to generate a custom theme to adapt to your app’s unique design aesthetic. Skeleton provides a powerful but easy to use theme generator to make to enable this.

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 (any name is fine).

You may import each custom theme at the top of your project’s tailwind.config. Then proceed to the register instructions below.

import myCustomTheme from './theme-custom.ts';

Register Themes

plugins: [
  // The Skeleton Tailwind Plugin
  skeleton({
    themes: [
      // Preset Theme(s)
      themes.cerberus,
      themes.pine,
      themes.rose,
      // Custom Theme(s)
      myCustomTheme
    ]
  })
];

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

Activate a Theme

Finally, set the active theme to display using the data-theme attribute on your <body> element.

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

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 project’s global stylesheet. This will target the root scope, a specific theme, then set the property value.

: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 utility classes, you can produce theme-specific styles.

Simple Card

This card will utilize a generic theme style.

Enhanced Card

This card has 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 space-y-2 p-4">
		<p class="font-bold">Simple Card</p>
		<p>This card will utilize a generic theme style.</p>
	</div>

	<!-- Uses a custom `.card-enhanced-example` class to enhance styles for select themes -->
	<div class="card-enhanced-example space-y-2 p-4">
		<p class="font-bold">Enhanced Card</p>
		<p>This card has 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-primary-500 ring-4;
	}
	/* Enhanced for the Catppuccin theme only. */
	[data-theme='catppuccin'] .card-enhanced-example {
		@apply preset-filled-primary-100-900 border-primary-500 border 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

API Reference

For more information, please refer to the full Tailwind Plugin documentation.