docs(examples): 📝 added multi-themes example

[lloydrichards]

Goals/Scope

I recently implemented next-theme on my own site with the desire to add multiple themes controlled through design tokens. I found that the examples and documentation were not very helpful when it came to structuring my project and so now that I've figured out what works, I want to be able to contribute a minimal example so others might save some time.

Description

For the example, I forked the with-app-dir example and added 6 themes to the global.css using css variables and then connected these variables to some color utilities in the tailwind.config.ts. Expanding on the page.ts with a <span> around the mutli to demo how the tailwind utility is used while keeping the rest using the normal text- and dark:text- to show that tailwind is still respecting the dark mode.

Comments

I've not updated the README.md with an explanation on using multiple dark themes using the darkMode: ['class', '[data-theme^="dark-"]'], since I want to keep the scope of this PR narrow, but this might be nice to update too.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
next-themes-basic	❌ Failed (Inspect)			May 6, 2024 8:48am
next-themes-tailwind	❌ Failed (Inspect)			May 6, 2024 8:48am
next-themes-with-app-dir	❌ Failed (Inspect)			May 6, 2024 8:48am

[christian1koch]

I used this approach as well, seems to be the best way to create multiple color themes + light/dark themes.

Something I would have like tho, is to have light/dark themes separated from color themes, but that is only doable by having two different contexts, and since next-themes does not exposes the context, we can't do anything about it.

[trm217]

@pacocoursey Should we also create a vercel deployment for this example?

[lloydrichards]

@trm217 or @pacocoursey is there anything you need from me to get this merged? I agree that there should probably be some configuration with Vercel, but that's out of my hands I think.

Let me know as I have some time this week if need 👍

[trm217]

@lloydrichards No, all good, I was just waiting for paco to respond about the vercel deployment for the example. But I suppose we can also discuss that later.