NEXT: New Theme Generator

[endigo9740]

This will act as a hub to centralize this information.

UX Flow

Maintainer Requests

The following requests are coming straight from the Skeleton team. These are highly likely be implemented:

Generator:

• Migrate the theme generator new a new standalone full-stack SvelteKit application (including database)
• Consider making use of chroma.js for color management (reference)
• Implement a wizard-like UX flow
• Enable the ability to edit each individual color swatch on demand
• Provide a feature to pin/lock certain colors on randomize (reference)
• Make considerations for accessing theme color values via Typescript/Javascript
• Make considerations for social features: share, upvote, highest rated
• Consider the use of Superforms and Zod for form handling.
• Allow users to import existing themes for additional edits
• Review integration with Google Fonts to preview and generate font imports ahead of time
• Background image + mesh gradient previews
• Unify theme import syntax and allow for direct import to support HTML Canvas usage (reference)
• A11y: provide better support for high/low contrast for light sensitive users (reference)
• A11y: explicitly state support for WCAG/APCA compatibility
• Move data-theme from body tag to html tag #2559

Theme:

• Expand themes to support the shade 950, introduced in Tailwind v3.3
• A11y: Provide "on" colors for every swatch. Set via a breakpoint between shade 50-950 (UI: range slider)
• Support theme-specific modifications, such as header weight and background images (ex: gradient meshes)
• New CSS custom props
  • typography scale
  • grid/layouts/spacing
  • elevations
  • etc
• Allow for user-supplied custom CSS custom properties (reference)
• Make use of local theme variables for repetitive values:
  • "on-{color}" breakpoints, ex: 500
  • Type scale factor, ex: 1.200 (reference)
• Update theme type to be unified for preset vs custom theme. Adjust for new theme structure.
• Users need more opt-in control for common styles:
  • Text highlight color
  • Background images (including canned gradients)
• Drop the concept of enhancements in favor of more theme settings + app.postcss overrides
• Evaluate support for OKLCH colors and other color formats.

Documentation:

• Provide more guidance around user-extended theme settings
• The instruction for implementing preset or custom themes could be improved

Community Requests

The following requests have come from the community and are under consideration:

• Use :host instead of :root to declare theme color variables #2167
• feat: color theory based theme generator #1925
• Transition between themes #2209
• Enhancements on Custom Themes #2011

Bugs and Issues

• Faux Italic Issue with Playfair Display on Seafoam Theme in iPhone Safari #2188

References

• https://www.radix-ui.com/colors/custom
• https://uicolors.app/create
• https://shaper.design | https://hihayk.github.io/shaper/
• https://news.ycombinator.com/item?id=39227831
• https://github.com/rose-pine/rose-pine-theme
• https://github.com/catppuccin/catppuccin#-palette

See Also

The following updates will likely need to be handled in coordination.

• NEXT: Tailwind Plugin #2360
• NEXT: Improved dark mode support #2359

Resources

• https://airbadge.dev/

Feedback

If you have additional updates or requests for this feature, please do so in the comments section below.

[Sarenor]

By default the Theme Generator is set to the colors of the skeleton theme.

It would be nice if the Theme Generator would be set automatically to the properties of the selected theme.
This would make it easy to tweak one of the provided themes to your liking.

As noted here: #1179

[endigo9740]

Ideas: https://www.youtube.com/watch?v=YWVneCWIfoE

[Elliott-Green]

Theme Contributions

I'm imagining a comprehensive list of community approved themes via a new theme channel. Get enough thumbs up on your theme with a PR, gets merged and shown on the community themes.
Theme's can get dropped into a structure in the community themes repo, like.

/themes
    /skeleton
        skeleton-theme.ts

Then the client would have a grid layout of like a preview of different components/colors. Showing the general look and feel as much as possible within a small grid element.
Using table and pagination, many themes can be loaded onto a single route.
Potentially clicking onto the theme, would open a child route /themes/:themeTitle, showing a dummy page with more components spaced out on a full page, rather than being a squished grid element.

Marketing

Theme Thursdays could be a thing whereby you take some decent recent themes and just market how nice they are on socials.

Font-url hacks

Fonts are moved to userland which is fine. Wondering if theres any hacks with the google font-urls so that users can preview a bunch of fonts all at the same time from the theme generator. something like, can I dynamically place a font-url somewhere in the theme generator just to check a font quickly.

post.css within theme generator

Some themes like skeleton have a gradient mesh applied with post.css at the generator level.
It would be cool to have a panel where we can throw a potential mesh into to see the results.

[ak4zh]

Adding another idea I was thinking about once theme generator is turned into a full fledge web app.
Adding a feature to generate and share the themes via a url.

This can be done without any database by encoding the final css into a base64 string and adding it to url params, so users can create themes and share it easily with a sharable url.

[endigo9740]

Adding another idea I was thinking about once theme generator is turned into a full fledge web app.
Adding a feature to generate and share the themes via a url.

This is one of my ideas too. Though I'm leaning towards the database approach because I'd like users to be able to self maintain a series of themes for themselves, or share those with others. But themes will always be public to help build a community approach to this.

[Typogram]

TL;DR: The current theme customization process in Skeleton UI is prolonged due to the need to switch between the documentation site and the dev environment. I propose integrating a live Themer component directly into the core library, allowing developers to see theme changes immediately, enhancing the customization process and overall user experience.

Hello Skeleton UI maintainers,

Firstly, I would like to commend the team on the theme generator provided on the documentation site. It's a great tool and I've found it extremely useful.

However, I noticed that the process of using the theme generator and integrating it into my development environment can be a bit cumbersome. The current flow involves tweaking the theme on the documentation site, copying the configuration, pasting it into my development environment, seeing how it looks, and then repeating this loop if further modifications are needed. The feedback loop feels prolonged and sometimes hinders the rapid prototyping experience.

To address this, I've developed a local "Themer" component in my setup, which allows me to design and tweak the theme live on my website. The immediacy of this tool has significantly improved my theming process.

I believe that this Themer component could be of immense value to other developers using Skeleton UI. Therefore, I would like to suggest integrating a themer component similar to my solution into the core Skeleton UI library. This would enable developers to have a quicker feedback loop when designing themes and make the customization process even more seamless.

Benefits of this proposal:

1. Quick Feedback Loop: Developers can immediately see the impact of their theme changes.
2. Ease of Access: Integrating the Themer directly into the core library means that developers won't need to switch contexts between the documentation site and their dev environment.
3. Improved User Experience: By streamlining the theming process, we can potentially attract more users to Skeleton UI, given the enhanced user experience.

If the team is interested, I'm more than willing to share my implementation of the Themer component and discuss possible ways to integrate it into Skeleton UI.

Thank you for considering my suggestion. I genuinely believe this feature can bring substantial value to the Skeleton UI community.

My implementation of the themer can be seen here: https://dev.icondash.com/ (it will be removed in the future after the development is done)

[gzuuus]

Hi, first of all thanks to the maintainers of this project, I started using skeleton in my project ~3 weeks ago and I love it! Congratulations to all the maintainers and contributors!

I recently opened an issue contemplating the possibility of adding the option to transition between theme changes, I think it can be nice and useful for some projects.
#2209

On the other hand I've read in this issue several times the idea of creating themes that you can then share. It's precisely one of the goals of the project I'm working on. My project is an application to share lists of links in which I use a new decentralized communication protocol, in which I am developing, very promising, this protocol is called 'nostr'. In my application I will allow my users to generate custom themes and they will be stored in a json object that will conform a nostr event. This allows users to save their custom themes in the network, and they will be able to share them as they will be public, and others will be able to try them live and even 'fork' them to use.

If you are interested I can develop the explanation a bit more, or keep you updated on this feature when it is developed.

[endigo9740]

Note that I've updated the original post at the top to conform to the new v3 format. We are still accepting new feedback and requests, but please make sure to read through this post first to ensure your request is not already present. Thanks!

Attention @ryceg

[Hugos68]

What kind of database will this include, and what would this look like? Will it include authentication (to store themes per user for eg)?

If so I'd happily recommend Supabase to do this with, it's free (hobby) tier is very generous and will work just fine with upto 50.000 users: https://supabase.com/pricing

I also have a lot of experience with supabase combined with sveltekit so I could definitely help out in this area.

It would be great if we could get some schematic for the database design and requirements list.

[endigo9740]

@Hugos68 likely something like that. Supabase, Prisma, etc. I'm a frontend and design guy, so backend is not my jam. We'll likely bring in the big guns to help decide on the specific tech. I'm sure Rhys and I would appreciate the help though!

[zadamg]

just want to say i'd like the ability to change shadows as well. also, it'd be nice to have something like the basic https://ui.shadcn.com/ without having to create it. I know i've struggled with this debate in creating my startup because there aren't any "normal/basic" options in the current them list.

[TazorDE]

Disregarding previous comments here are some things I'd like to see based on the current iteration of the theme generator in feat/next-theme-generator:

• Option to see / customize all color values in the color palette as this is especially useful when working with designers
• headings for the preview sections
• Option to set the color for text-highlighting/selection
• Option to set custom values for the typographic scale
• Option to set custom values for letter spacing
• Option to set a custom value for scale-factor
• Option to set custom values for radius shapes and edges
• Maybe options to set custom typography styles for each typographic HTML-tag

Please treat this as a wish-list as this is just a list of small things I noticed when trying out the current iteration and comparing with theme customization I had to do while working on work projects.

[endigo9740]

@TazorDE just FYI the generator will likely always have safety rails, to help folks that may not be super design savvy. However, every single setting will be manually customizable in the theme code itself. For the most power-focused power users, this will likely always be the best option for that. I'd recommend tapping the Code view and scanning through the properties. Most are fairly semantic, but I do plan to have a breakdown of each in the doc like so:
https://www.skeleton.dev/docs/themes#css-custom-properties

That said, I do think we should expand the canned options for several settings in the new generator. I've gone with very conservative options to get us up and running for now though, mostly due to time constraints.

I like the options you've presented for additional theme settings to add though. I definitely agree on text highlighting, and I think we should likely also expand this to scrollbars too! This has been highly requested for a long while, and browsers have recently standardized on a single approach.

When it comes to more typography settings, I'm not sure if it will be reasonable to ask folks to set these for every HTML element, but do you have control over the raw type scale values via utility classes like .type-scale-1, which can act as privatives for creating semantic classes in your project. Imagine something like:

.headline { @apply type-scale-5 text-red-500 italic; }

<h2 class="headline">...</h2>

This is already built in!
https://github.com/skeletonlabs/skeleton/blob/next/packages/skeleton/src/plugin/utilities/typography.ts#L7

[TazorDE]

just FYI the generator will likely always have safety rails, to help folks that may not be super design savvy. However, every single setting will be manually customizable in the theme code itself. For the most power-focused power users, this will likely always be the best option for that.

@endigo9740 I am aware, as that is the way I did it in the past. However I think an advanced mode might be a good middle ground for providing some more detailed styling options for power users.

That said, I do think we should expand the canned options for several settings in the new generator. I've gone with very conservative options to get us up and running for now though, mostly due to time constraints.

If you want we can connect on this as I have now worked with several designs that were not created with Skeleton in mind, so I could definitely provide some insights to what might be possible values.

When it comes to more typography settings, I'm not sure if it will be reasonable to ask folks to set these for every HTML element, but do you have control over the raw type scale values via utility classes like .type-scale-1, which can act as privatives for creating semantic classes in your project. Imagine something like:

I know. This suggestion is kind of a wild one. But as said previously, on more than one occasion I had to build custom values for each typographic HTML element, so it might be an option for an advanced mode. (I guess I've now volunteered to build that one if it is desired by more people)

[Sarenor]

Bring back the randomize all (colors) Button!

[Hugos68]

Bring back the randomize all (colors) Button!

Ideally with locks!

[endigo9740]

Bohdan reported that the Cerberus theme's contrast colors don't match 1:1 with the theme generator.

The reason for this is the theme generator was updated to include a algorithmic manner for validating a11y contrasting tones. However, the preset themes currently shipped within the v3 Tailwind Plugin have not yet been updated since this occurred.

For now, please favor the colors shown in the theme generator. And expect most if not all themes to be re-generated at some point in the future as we continue to refine and improve the generator and theme format.

[ValipPowa]

Docs is mismatch
theme docs

should be
import yourThemeNameHere from './theme-custom.ts';

[endigo9740]

Let's review and compare this to Chroma.js:

https://leonardocolor.io/