Themes - Skeleton

Skeleton
  1. design
  2. ›
  3. 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. Tap one of the theme preview cards below to copy the theme name to your clipboard.

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;
}

Custom Fonts

COMING SOON

API Reference

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