Yesterday I was working on my personal website, and I really wanted to add a dark mode toggle.
I already converted my site to use Tailwind before, ...
For further actions, you may consider blocking this person and/or reporting abuse
Was new to react & next , was confused with using contexts on _document.tsx , because at the tailwind docs it said add class to HTML.
This is a life saver. ♥️
So i went to docs of next-theme. and missed the attribute = class part (wasted 10 mins of life)
By the way , Thanks , really appreciate it.
Perfect. Thank you. Much easier than a lot of other solutions.
Thanks for sharing the wonderful idea ❤️
You're welcome!
I have done everything said here, and i still cannot see the dark mode happening. It changes if I set my system to dark mode, but I've set the darkMode property in tailwind.config.js to "class". Been googling for hours :(
Hi Rishav, do you have a repository/codesandbox I can check out?
Yes, here: github.com/rjitsu/cssKenpai-v2
I think you could move the ThemeProvider in github.com/rjitsu/cssKenpai-v2/blo... to the top level of the rendering. Maybe that might help to get the
<div className="dark:bg-gray-700">part working?Great, that fixed it, thanks so much! I thought the ThemeProvider could only have Component as it's children, that's why I didn't try this yet. Thanks.
Happy to hear that! Glad to help
Next + Tailwind = Sweet tech stack!
Thanks for the share Thomas 👍
I couldn't agree more :)
My pleasure!
I know it was a good idea to keep your post on the side, just used it 😉
Thx again Thomas!
Excited to see the result!
use
dark:is not working so i useconst {theme, setTheme} = useTheme()
className={theme === 'dark' ? 'text-blue-500' : 'text-white'}
is there any solution?
I found my problem, i didn't add code
module.exports = {darkMode: 'class',
// ...
}
to
tailwind.config.jsThis helped, thanks
Glad it helped!
thx