Skeleton Next - Update 14 - Theme Generator Overhaul

[endigo9740]

Hey everyone, Chris here from Skeleton 👋

In today's update I would like to cover several major improvements to the Skeleton v3 Theme Generator, as well as showcase a number of new and updated themes. I'll also be providing an accompanying video that should act as a tutorial if you need help getting started. Please note that today's update to the Generator should now represent the state you will see at launch. However, we still have plans to iterate on this in the future, so we will cover some proposed concepts below.

Video Tutorial

• Watch Tutorial on YouTube

Theme Generator Overhaul

To begin, I'd like to start by explaining the overall goal with the new Theme Generator. Today's update hopes to address a number of feedback items we've received from the community. As such, let's break down the most common requests below, as well as cover how we're addressing each.

Improve the UX - while keeping this simple and imitative for for new users

The generator is now lives in a dedicated web app and feature a split panel design with preview elements on the left, and control settings on the right. Giving structure and controlled flow for configuring your theme. You can also quick toggle to your raw theme code as desired, which also updates in real time.

Provide direct control over of your color palette and improve color generation

By default you can now generate a full 11 shade palette for each color via one of four options:

1. By providing a "seed" color, which will generate a full palette around that
2. By generating a random color, which will then seed the full palette
3. Providing the 50/500/950 (high/medium/low) values, which automatically blend between
4. Manually setting all 11 shade manually - which is great when importing from Designer mocks

Note that each option will automatically attempt to pair the best contrast color available, with a goal of reaching WGAC compatible contrast ratios. This of course depends on the source colors provided, so manual testing is still highly recommended!

Expand and standardized additional theme settings

We've greatly expanded the number of settings that you can provide per theme, especially when it comes to font styles - which include base, headings, and anchor styles. These can feed primitive utility classes that can used to generate additional semantic typography classes. We'll provide more guidance around this in the future.

Improved component, color, and typographic previews

All previews now use real v3 Skeleton Tailwind and functional components, ensuring a consistent display. Some of these automatically react as you adjust settings - such as showing the active palette selected when defining each color.

Improved support for using theme color values in Javascript environments

Themes now come with a more streamlined JS-based structure that should allow you to easily import and consume the property values directly. Making them easier to use in Canvas elements, such as charts.

Provide a means to import an edit existing themes

Finally, the most requested feature by a large margin - the ability to import themes! We'll cover it in detail below.

Imports and Templates

The new import features comes with three options, which we'll cover below.

Import v2 Themes

First, we know many of you will be migrating from Skeleton v2 to v3 projects at launch. As such we've automatic support for detecting and importing v2 compatible themes. Please note this does come a couple caveats. Namely it's limited to colors and and edge styles, which would typically be the the most painful to import manually. Note that contrasting color tones will still be generated automatically, but the new color blending will not activate until you adjust the colors directly. This helps preserve the old blending results if you prefer.

Import v3 Themes

Additionally Skeleton v3 themes will also be automatically detected, but will import all theme settings. This means that even when you complete and export your theme, you may still re-import and edit in full. The only restriction being manual adjustments you've made within the theme code itself (ex: adding custom fonts). These settings will be ignored until adjusted in the Generator settings. At which point they'll be overwritten.

Import from a Template

Finally, for those of you that are wishing to create a new theme but don't to wish to start from scratch, you may now import from templates. Select any template and all settings will be auto-imported into the Generator to use as your foundation for your own theme. Templates are based on the 20+ themes provided by Skeleton!

New and Updated Themes

Speaking of themes, you may now preview an expanded list of preset themes in Skeleton v3. Feel free to preview each of these on the updated v3 doc site. This includes updates to all 10 legacy themes from Skeleton (ex: Crimson, Rocket, etc), as well as 12 brand new themes created from the ground up using the new Generator. All themes take full advantage of the new theme format and features. This provides a large number of options that should cover a variety of different aesthetics and styles.

Future Updates

Before we wrap up, we want to provide a sneak peek in some early concepts we're proposing for future post-launch updates to the Generator and themes. See this visualized below.

• We're aiming to move from the generator being a simple tool, to more of a service application. Think of it like a mini social network where users can login, create and manage their own themes, as well as share themes with the community
• Most themes will be public by default, but if there's enough interest we might consider private theme management for a small monthly cost (the GitHub repos model if you will). Any money earned will help support Skeleton directly.
• You'll be able to search and navigate any number of themes created by the community, including the ability to "like" your favorite community-generated themes.
• We'll be able to use Likes to generate a list of the most popular themes, helping showcase the best of the best
• We may run periodic contests with small incentives to help spur the generation of more high quality themes for the community
• This new theme service may also make it easier to import and install themes directly into your apps. Potentially even allowing for auto-import of settings the upcoming Skeleton Figma UI Kit, to provide a huge quality of life improvement to designers.

Again, I want to emphasize these updates are merely proposals at this point. However, we would love to hear what you think. Feel free to share comments and suggestions in the thread below this post. If you're interesting in helping contribute to these changes, let us know in the milestone ticket.

As always, any comments or questions about today's updates are welcome below. We would love to hear from you!

[ryanott01]

v2 seems to have more granular controls on text & fill color. Where v2 gives you control over each color v3 seems to only have the global options for dark/light mode. Are the per color controls something that will be coming back?

To take it a step further I feel like being able to control each shade of each color would be the absolute best.

[endigo9740]

@ryanott01 I'm not sure I follow. Quite the opposite here, v3 gives you much finer grain control over colors in most regards. I mean, the themes literally take over 2x more values due to how contrast tones are handled. This includes:

• Each colors set of shades 50-950 (950 is an addition in v3)
• Contrast tones are set PER shade 50-950 (previously there was only a single contrast color)

Here's a v2 to v3 theme to compare directly:

• v2: https://github.com/skeletonlabs/skeleton/blob/dev/packages/plugin/src/tailwind/themes/skeleton.ts#L20
• v3: https://github.com/skeletonlabs/skeleton/blob/next/packages/skeleton/src/plugin/themes/cerberus.ts#L55

To take it a step further I feel like being able to control each shade of each color would be the absolute best.

Note the "all" toggle under colors in the Generator. I think this is what you're referring to. That said, you will always have manual control - it's just some of that may be beyond the scope of the generator. Which is meant to be simple and friendly for any level user.

What Tailwind property you use to consume the palette colors shouldn't matter, as ALL are supported out of the box now. Another improvement as v2, which only supported some properties. You now get all these:

accent, bg, border, caret, decoration, divide, fill, outline, ring, shadow, stroke, text

You'll note that includes text- for text color and fill- for fill color.

[ryanott01]

I'm talking specifically about text color. I did some digging cause I remember this feature being mentioned in another thread.

#1142 (comment)

I did not see a way to control this with the theme editor UI but maybe I am missing something.

[endigo9740]

@ryanott01 ahh I see, yeah that was part of the original concept. We actually had those types of controls in an earlier draft of the Generator, that was until we realized we could automatically calculate the contrast ratios! As you adjust colors in the Generator you'll see these values update automatically! It feels like magic, but it's uses chroma.js to to calculate the ratios against WGAC standards:

NOTE: watch the primary 300 and 400 here as I adjust the value:

Note that you still have control over the light and dark color values - including the ability to use pure white/black if you prefer. These are the controls at the bottom of the Color panel:

If for some reason you don't agree with how this is occurring in the generator, direct manipulation in the output template code is going to be our current recommendation. Otherwise keep in mind Skeleton and the Generator are open source - we welcome PRs if you think you can improve this. Here's where this occurs in the source:

https://github.com/skeletonlabs/skeleton/blob/next/sites/themes.skeleton.dev/src/lib/utils/generator/colors.ts#L20