NEXT: New Theme Generator

[endigo9740]

NOTE: This issue will need to be updated or regenerated to specify the requirements for the v4 release. We will not be implementing many of the ideas presented below.

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
• Allow users to import existing themes for additional edits
• 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)
• Move data-theme from body tag to html tag #2559
• A11y: explicitly state support for WCAG/APCA compatibility
• Post-Launch: Make considerations for social features: share, upvote, highest rated
• Post-Launch: Consider the use of Superforms and Zod for form handling.
• Post-LauncH: Review integration with font service (ex: Google Fonts) to preview and generate font imports
• Post-Launch: Background image + mesh gradient previews
• Proposal: generate custom presets again user-defined colors

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.
  • 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.
• Expand themes to support new settings:
  • Text highlight color

Documentation:

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

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
• Enhancements on Custom Themes #2011
• feat: color theory based theme generator #1925
• Transition between themes #2209

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

Theme Inspiration

• 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]

We might need to add a step 0) Refactor the theme generator to be more modular and separated.

[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]

Reference: https://uicolors.app/create

[endigo9740]

UI layout issue: #1750

[endigo9740]

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