Theme Toggle

Switch between light and dark themes with animated, sound, and haptic feedback.

Features

• Switches between resolved light and dark themes through next-themes.
• Animates the theme icon without causing a hydration mismatch.
• Plays the TentUI metal click sound with subtle selection haptics.
• Supports custom icons, button variants, and theme-change callbacks.

Installation

pnpm dlx shadcn@latest add @tentui/theme-toggle

Usage

Wrap your application with ThemeProvider from next-themes.

import { ThemeProvider } from "next-themes";
 
<ThemeProvider attribute="class">{children}</ThemeProvider>;

Then render the toggle.

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

<ThemeToggle variant="outline" />

Use onThemeChange when the application needs to synchronize related browser UI, such as a theme-color meta tag.

<ThemeToggle onThemeChange={(theme) => updateThemeColor(theme)} />

Accessibility

ThemeToggle preserves the underlying button's keyboard and focus behavior. Its accessible label describes the theme that will be activated. Sound and haptics are additive; the icon and document theme provide the visual state.

API reference