Dark Mode

Learn how to enable dark mode on your website.

You can enable dark mode on your website by using the next-themes package.

src/components/client-prodivers.tsx

"use client"
 
import { ThemeProvider } from "next-themes"
import * as React from "react"
 
export const ClientProviders = ({ children }: { children: React.ReactNode }) => {
    return (
        <ThemeProvider attribute="class">
            {children}
        </ThemeProvider>
    )
}

src/app/layout.tsx

import { Toaster } from "@/components/ui/toaster"
import { ClientProviders } from "@/components/client-providers"
 
export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head />
      <body suppressHydrationWarning>
        <ClientProviders>
            {children}
            <Toaster />
        </ClientProviders>
      </body>
    </html>
  )
}

Toggle

Simple toggle

"use client"
 
import { useTheme } from "next-themes"
import * as React from "react"
import { Switch } from "@/components/ui/switch"
 
export function DarkModeToggle() {
    const { theme, setTheme } = useTheme()
 
    return (
        <div className={/*...*/}>
            <Switch checked={theme === "dark"} onChange={(v) => setTheme(v ? "dark" : "light")}/>
        </div>
    )
 
}