An Interest In:
Web News this Week
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
Easy way to use Dark Mode in Next.js Tailwind
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, so how do I enable dark mode now?
It's simple: in Tailwind v2 dark mode is built in (https://tailwindcss.com/docs/dark-mode).
To be able to toggle the dark mode, you should put darkMode: 'class'
in your tailwind.config.js
.
This configuration implies that a class called dark
will be added to the <html>
tag.
Once this class is active, your dark:{class}
classes will become active.
To link this functionality up with Next.js I used the lightweight next-themes library (https://github.com/pacocoursey/next-themes).
After installing this library, simply change your _app.js to include the ThemeProvider:
import { ThemeProvider } from 'next-themes'function MyApp({ Component, pageProps }) { return ( <ThemeProvider attribute="class"> <Component {...pageProps} /> </ThemeProvider> )}export default MyApp
Including the attribute="class"
is very important, since this tells the library to use the Tailwind dark theme class.
For the toggle button I used the following:
import {useTheme} from 'next-themes'const {theme, setTheme} = useTheme()<button aria-label="Toggle Dark Mode" type="button" className="p-3 h-12 w-12 order-2 md:order-3" onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
An example of the dark:{class}
code, this will use a purple background color for light mode and a darkgrey color for dark mode:
<nav className="fixed bg-purple dark:bg-darkgrey h-16 w-full z-50">
And that's it! The theme is being switched when you click the button.
Live example can be found here: https://www.thomasledoux.be/
Github source: https://github.com/thomasledoux1/website-thomas
Inspired by: https://leerob.io
Original Link: https://dev.to/thomasledoux1/easy-way-to-use-dark-mode-in-next-js-tailwind-2ob1
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To