Anyone used next-themes to toggle the theme?

[lsbyerley]

I'm using this library in nextjs and curious if anyone has a theme toggle working with the next-themes library?

[lsbyerley]

It seems the dark class applies no matter what. The dark class applies to the element even in light mode

<header className="bg-gray-200 navbar dark:bg-gray-600"></header>

[saadeghi]

daisyUI + Next.js + next-themes work as expected. Example repo: https://github.com/saadeghi/daisyui-nextjs-nextthemes

1.mp4

However, instead of constant color names like bg-gray-200 you should use daisyUI color names to get daisyUI themes working.
It's easier to use than Tailwind's dark: prefix because you wont need to set light/dark colors for every element.
For example, instead of

<header className="bg-gray-200 navbar dark:bg-gray-600"></header>

use

<header className="bg-base-200 navbar"></header>

bg-base-200 will be a light color on light theme and will be dark color on dark theme.

Let me know if you have any questions

[lsbyerley]

@saadeghi thank you for the explanation!

[santgr11]

does this work with daisyui themes other than dark and light?

[saadeghi]

@santgr11 according to next-themes docs, it should work:
https://github.com/pacocoursey/next-themes#more-than-light-and-dark-mode

[raaaahman]

Hello, it took me quite a while to figure how to make Daisy UI's theme controller, next-themes and Tailwind's dark modifiers to work together, so I thaught it could save time to someone to share a sample repository: https://github.com/raaaahman/next-themes-daisyui-switcher

Please note the date and the versions of the packages used, I cannot guarantee this to work with every versions of these frameworks/libraries.

[Bash4195]

Thanks a ton for making this!

[Bash4195]

Hey, I was looking at this again as I noticed there was some delay when the page loads and it figures out which theme the user is using.

I found out that instead of trying to sync the class and data-theme methods, you can simply set tailwind to use the data-theme method instead. This method gets rid of any delay in the theme and works better with next-themes.

All you have to do is keep the next-themes provider default, this is mine:

<ThemeProvider>
  {children}
</ThemeProvider>

Then in the tailwind config, simply set dark mode to use the data-theme selector:
darkMode: ['selector', '[data-theme="dark"]'],

Info here: https://tailwindcss.com/docs/dark-mode#customizing-the-selector

Just wanted to add this incase anyone else runs into the same issue

[raaaahman]

Wow, it seems I completely overlooked that part of the documentation! Your solution is way easier, many thanks!