Theme Toggle

"use client"

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

export function ThemeToggleDemo() {
  return (
    <div className="flex items-center justify-center">
      <ThemeToggle />
    </div>
  )
}

Installation

pnpmnpmyarnbun
pnpm dlx pitsi@latest add theme-toggle
Copy

Usage

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

Copy<ThemeToggle />

Examples

Default (Light, Dark, System)

"use client"

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

export function ThemeToggleDemo() {
  return (
    <div className="flex items-center justify-center">
      <ThemeToggle />
    </div>
  )
}

Light-Dark Only

Use the mode prop to show only light and dark options without system.

Copy<ThemeToggle mode="light-dark" />

Props

ThemeToggle

Extends all props from HTMLDivElement.

Features

• Smooth animated transitions between theme changes
• Compact design with icon-only buttons
• Built on next-themes for theme management
• Supports light, dark, and system preferences
• Accessible keyboard navigation
• Hydration-safe with proper mounting checks
• Customizable with className prop