Adding themes to Next.js app makes it possible for users to personalize their experience and improve the usability of product. With themes, users can easily switch between light and dark modes.
- Next themes
This package provides a custom useTheme hook to consume and change the current theme. It can also select between dark and light modes based on the user’s system-preferred color theme. To install it, run the following command in your project’s directory:
- Setting up dark mode
- Wrap
<Component />with<ThemeProvider />exported from next-themes:
2. Add ’class’ to darkMode option in the tailwind.config.js:
3. We’re now able to use the useTheme hook provided by the library to change the current theme:
4. Styling components with the dark: prefix
We can now use the dark: prefix with any Tailwind class to specify a variant that will only be applied when dark mode is active.
Creating a custom dark mode theme is a great way to give users a more personalized and tailored experience. With the help of Tailwind’s built-in dark mode, CSS variables, and custom classes, it’s easy to create a dynamic, lightweight theme system that changes colors and styles on the fly.