Celebrate 2 years of Intent UI with 20% off using code 2YEARSB.
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.

Inertia.jsButton group

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 install next-themes @heroicons/react

Provider 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>
  )
}
Unlock the full power of
Intent UI Design

Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.

Learn more
Inertia.js
Button group