Dark mode
Next.js
Make your Next.js app dark mode ready with a smooth, step by step guide to set up theme switching, persist preferences, and polish the experience across pages.
Next themes
Because you are using Next.js, you can use next-themes to implement dark mode. And since you're using @heroicons/react, you can use the SunIcon and MoonIcon icons.
npm i next-themes @heroicons/reactProvider and switcher
Next, you need to create a theme provider component. You can do it like this:
Loading source code...
Usage
After that, you can use it in your root layout file like so:
import { Providers } from '@/components/providers'
export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
return (
<html lang="en" suppressHydrationWarning>
<body>
<Providers>
{children}
</Providers>
</body>
</html>
)
}