Skeleton Next - Update 6 - Plugin, Docs, and Figma

[endigo9740]

Hey everyone, Chris here from the Skeleton crew! This post is part of an ongoing series of updates as we progress towards Skeleton v3 (aka Skeleton "Next"). As usual, we've provide a quick summary post below, as well as an in-depth video walkthrough.

Today's updates focus on updates to the Skeleton plugin, the documentation website, as well as a first sneak peek of the upcoming Figma assets.

Useful Links

• YouTube Video Walkthrough

Skeleton Plugin

Media Strategy Support for Dark Mode

Contributor @AdrianGonz97 has made two notable improvements to the Skeleton Tailwind plugin. First, you can now easily use Tailwind media strategy for Dark Mode with zero additional configuration. Under the hood this uses the a CSS media query prefers-color-scheme to to use light or dark mode based on your operating system preference. Unlike Skeleton v2, this requires zero additional configuration! Simply set darkMode: "media" in your Tailwind config:

// Tailwind Config

export default {
  darkMode: "media | selector",
};

Note that the class-based separator strategy is still available as well.

Simpler Theme Configuration

It's now much easier to import and register preset and custom themes within the Skeleton plugin. In previous versions of Skeleton you were forced to denote preset and custom themes as shown:

// Tailwind Config

export default {
  plugins: [
    skeleton({
      themes: {
        preset: [
          /* ... */
        ],
        custom: [
          /* ... */
        ],
      },
    }),
  ],
};

However in Skeleton v3 this is now merged into a single universal themes array:

// Tailwind Config

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

export default {
  plugins: [
    skeleton({
      themes: [
        // Preset Themes
        themes.cerberus,
        themes.catppuccin,
        // Custom Themes
        myCustomTheme,
      ],
    }),
  ],
};

v3 Doc Updates

You may also notice several notable updates to the v3 doc site. We've started to refine and polish the look and feel of each theme using the new Theme Enhancement technique. As well as several new content sections, including:

• Docs
  • Introduction
  • Installation
  • Fundamentals
  • Tailwind Plugin
  • Dark Mode
  • Figma
• Design
  • Themes
  • Iconography
• Resources
  • Contribute

Also a quick side note - the Astro bug preventing our Svelte 5 components from rendering in the doc site has note been resolved. You should now be able to view and interact with our new Svelte components in their respective documentation pages!

Figma Assets

Finally, we have new dedicated documentation section discussing the upcoming Skeleton v3 Figma UI kit. We highly recommend checking out today's video update (linked at the top of this page), which provides a sneak peak of the brand new Figma assets.

What's Next

We're currently working on another major update to the documentation structure. This will take full advantage of Astro's Content Collections feature, allowing us to have more dynamic navigation and a simpler structure for documenting our component pages. We also have new Progress and Tab components in the works. As well as automated unit testing for our Svelte and React component libraries coming soon. Expect several other exciting updates in our next progress update as well!

[shawnlong636]

Awesome work @endigo9740, love the progress towards v3. The automatic light mode feature is really great too. I had to do quite a bit of finicking to get that to work properly.

[endigo9740]

Thank you Shawn, and yeah I'm super excited about that one too! It's a long time coming!

[tobiasBora]

Great, I'm sure the figma plugin can be really useful… but wouldn't it make sense to also provide some open-source alternative (unless some open source apps can import/export to figma?). Seems like https://penpot.app/ is getting fairly popular, with over 26k stars in github and crazy contribution rate (no less than 18 changes & merged PR just yesterday).