-
I'm using this library in nextjs and curious if anyone has a theme toggle working with the next-themes library? |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 6 replies
-
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> |
Beta Was this translation helpful? Give feedback.
-
daisyUI + Next.js + next-themes work as expected. Example repo: https://github.com/saadeghi/daisyui-nextjs-nextthemes 1.mp4However, instead of constant color names like <header className="bg-gray-200 navbar dark:bg-gray-600"></header> use <header className="bg-base-200 navbar"></header>
Let me know if you have any questions |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
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
use
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