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>

Customize and Extend

Theme Properties

If you wish to update the CSS Custom Properties provided by any of Skeleton’s preset themes. Apply the following changes in your global stylesheet. This will target the root scope, a specific theme, then modify each theme property value.

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

Target Themes

If your application supports multiple themes, you can target changes to specific themes via the data-theme attribute.

app.css
/** Cerberus theme h1 tags only. */
[data-theme='cerberus'] h1 {
    background: pink;
}
/** Mona theme h1 tags only. */
[data-theme='mona'] h1 {
    background: green;
}

Backgrounds

Your app’s background colors are set automatically using two specific theme properties. Overwrite these using your global stylesheet.

app.css
[data-theme='cerberus'] {
    —body-background-color: 'pink';
  —body-background-color-dark: 'green';
}

You may also use Tailwind or vanilla CSS by targetting the <body> element.

app.css
/* Pink in light mode, green in dark mode. */
body { @apply bg-pink-500 dark:bg-green-500; }

Background images are also supported, including CSS mesh gradients. By using theme properties for each color, you can ensure the gradient adheres to your theme’s palette.

app.css
[data-theme='cerberus'] {
  background-image:
    radial-gradient(at 20% 10%, rgba(var(--color-secondary-500) / 0.075) 0px, transparent 40%),
    radial-gradient(at 75% 10%, rgba(var(--color-primary-500) / 0.075) 0px, transparent 50%);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Use Mesher to quickly and easily generate custom mesh gradients.

Mesher by CSS Hero

TIP: See how we handle targetted theme gradients for this website.

Custom Fonts

Skeleton recommends the use of Fontsource for installing and managing custom fonts.

Browse Fontsource

Install your font of choice.

Terminal window
npm install @fontsource/open-sans

Then import each font at the top of your global stylesheet.

app.css
import "@fontsource/open-sans";

Finally, overwrite each applicable theme property for your target theme.

app.css
:root [data-theme='cerberus'] {
    --heading-font-family: "Open Sans", sans-serif;
    /* --base-font-family: ... */
    /* --anchor-font-family: ... */
}

For custom themes, these settings are can be defined directly within each respective theme file.

API Reference

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