Theme Toggle - Saturation UI

Installation

pnpm dlx shadcn@latest add https://ui.saturation.io/r/theme-toggle.json

Dependencies

Requires next-themes to be set up in your project.

npm install next-themes

Wrap your app with ThemeProvider:

import { ThemeProvider } from "next-themes"

export default function RootLayout({ children }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      {children}
    </ThemeProvider>
  )
}

Usage

import { ThemeToggle } from "@/components/ui/theme-toggle"

<ThemeToggle />

API Reference

ThemeToggle

No additional props. The component internally uses useTheme() from next-themes to toggle between "light" and "dark".