Making a users able to set component styles from preview

[jerr3n]

Hello! I was wondering if it would be possible to allow users to set the style of their components based off of the shadcn theme generator? E.g. they could use lyra, and toggle mira, and so on. Thank you!

[Shiven0504]

Hiii @jerr3n , You can actually achieve this right now with a bit of setup. The shadcn theme generator outputs CSS variables (like --primary, --radius, etc.), so you could build a theme switcher by:

Storing multiple theme presets (Lyra, Mira, etc.) as separate sets of CSS variable values
Toggling them at runtime by swapping the variables on :root or a wrapper

Something like:
const themes = {
lyra: { "--primary": "240 5.9% 10%", "--radius": "0.5rem", ... },
mira: { "--primary": "210 40% 98%", "--radius": "0.75rem", ... },
};

function applyTheme(name: keyof typeof themes) {
const vars = themes[name];
Object.entries(vars).forEach(([key, val]) => {
document.documentElement.style.setProperty(key, val);
});
}