Dynamic Theme

[subpublic]

Hi!

I'm building a web app, where customer should be able to create their own themes, picking colors for Primary, Secondary, etc..
What's the best way to apply a theme like that?
Generating gradients, high, lows, etc. Without creating a .ts file manually.

[Sarenor]

The theme "just" puts the colors into CssVariables. So you'll need to store your customers values somewhere in a database and have a function to load them and either put them into your own theme file ready to be loaded or into a css file to overwrite the current theme colors.

[subpublic]

Thank you, but do you have suggestions on how to generate all the variables from some base colors?
Like, --color-primary-100, --color-primary-200, --color-primary-*, ...

The Theme generator seems to do that (in edit mode)
https://www.skeleton.dev/docs/generator

I can pick any color for Primary and it generates the gradients..

[Sarenor]

Sure, the Theme Generator is open source like the rest of Skeleton, just take a look: https://github.com/skeletonlabs/skeleton/blob/dev/sites/skeleton.dev/src/lib/layouts/DocsThemer/DocsThemer.svelte

[subpublic]

Great, thank you!

[endigo9740]

If you're building a solution for today, I'd suggest referencing how we solved this for the Skeleton v3 theme generator:

• https://themes.skeleton.dev/
• https://github.com/skeletonlabs/skeleton/tree/next/sites/themes.skeleton.dev

Note this was built using the Svelte v5 RC, but you'll find it's a substantial upgrade over the previous generator - which is a couple years old and starting to show it's age. Plus we make heavy use of Chroma.js, which vastly streamlined a lot of things related to color generation and management:

https://gka.github.io/chroma.js/