1. Edit tailwind.config.js
2. Install next-themes
3. Create a theme provider
💡
The
children
prop create a 'slot' in the ThemeProvider
4. Add the ThemeProvider
to your root layout
💡
By using the children
prop, the ThemeProvider
and the rest of the app are
decoupled and can be rendered independently.
5. Add a mode toggle
Using useEffect to check if the page is mounted to avoid hydration mismatch error will result in this on every page refresh/reload
It is a small annoyance that's hard to overlook once you see it. Luckily, it can be solved using Tailwind CSS dark class variant.