How to add multiple themes?

[AhsanSarwar45]

How do I add multiple themes like here: https://www.shadcn-svelte.com/themes, allowing the user to switch between them?

[SikandarJODD]

did u find the answer ?

[AhsanSarwar45]

@SikandarJODD A nice person on their discord server did present a solution although I haven't tried it yet as our plans for the theme changed. Pasting it here for reference:

My question: Hi, how do I dynamically change the theme, like on here: https://www.shadcn-svelte.com/themes?

Answer: "In order to update the theme, you need to update the variables as defined inside of your app.pcss
This can easily made through the use of style:<your var> in svelte, such as style:--primary="346.8 77.2% 49.8%", which will update the primary color for all nested elements underneath the element." (Jeanne)

So I'm guessing you can have a theme store, and then based on that store, change the style:<your var> in your +layout.svelte and it will hopefully update the entire application.

Let me know if it works for you and I can mark this as the answer.

[NeroBlackstone]

Use mode-watcher.

It will applies 'theme' to the element via the data-theme attribute.

And in your tailwind app.css:

html[data-theme='orange'] {
  --primary: oklch(0.8 0.18 50);
  --primary-foreground: oklch(0.1 0.05 50);
  --sidebar: oklch(0.98 0.02 74); 
  --sidebar-accent: oklch(0.95 0.04 75);
  --toggle-text: oklch(0.8 0.18 50);
  --toggle-hover: oklch(0.95 0.04 75);
  --toggle: oklch(0.98 0.02 74);
}