### Why Dark Mode? Dark mode has become an increasingly popular feature and it's not going away any time soon. Many of the products we use today include an option for enabling dark mode in one way or another. Personally, I really enjoy dark mode and most of the apps on my phone have Dark Mode enabled. Dark mode not only *looks good* it also helps save battery life. The real question is, *why shouldn't you use dark mode?* ### Technologies: Next-Themes & TailwindCSS [next-themes](https://www.npmjs.com/package/next-themes) enables developers to add Dark Mode capabilities to your NextJS app with just a few lines of code. If you're not yet familiar with [tailwindcss](https://tailwindcss.com/), its a CSS Framework that makes building UI applications a piece of cake. `next-themes` pairs very well with `tailwindcss` and that's exactly what we will be using in this tutorial. ### Install Next-Themes ``` $ npm install next-themes # or $ yarn add next-themes ``` ### Adding Dark Mode ```js:pages/_app.js import { ThemeProvider } from 'next-themes' function MyApp({ Component, pageProps }) { return ( ) } export default MyApp ``` ```js:tailwind.config.js module.exports = { darkMode: 'class' } ``` ### Using Dark Mode Since a server is unable to know the theme, the client must be mounted first in order to prevent a hydration mismatch error. ```js import { useTheme } from 'next-themes' const ToggleTheme = () => { const [mounted, setMounted] = useState(false) const { resolvedTheme, setTheme } = useTheme() useEffect(() => setMounted(true), []) if (!mounted) return null return ( // Add TailwindCSS `dark:` option

The current theme is: {resolvedTheme}

) } ```

Blog

All Posts

Adding Dark Mode to your NextJS App with TailwindCSS