1. design
  2. themes

Themes

The Skeleton theme system.

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.

tailwind.config
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 →

  1. Open the Theme Generator and design your theme.
  2. Tap the “code” view from the menu options at the top of the site.
  3. Provide a unique name for your theme.
  4. Copy the contents of the generated theme in full.
  5. 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.

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

Register Themes

Register each imported theme within the Skeleton plugin settings in tailwind.config. Then proceed to activation below.

tailwind.config
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.

app.pcss
: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.

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.