||

Theme Toggle

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

Switch themes with rectangle, circle, or blurred-circle view transitions.

animated-theme-toggle-demo

Overview

Theme Toggle uses the View Transition API when available and falls back to an immediate next-themes update. The icon swaps in place while the new theme reveals from a chosen origin.

Installation
npx honestui@latest add theme-toggle

Usage

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

<ThemeToggle variant="circle-blur" start="center" />

Wrap your app with ThemeProvider from next-themes before using the component.

Accessibility

The control updates its accessible name to describe the next theme. Reduced motion and unsupported browsers switch themes without the page reveal.

API Reference
PropTypeDefaultDescription
variantrectangle|circle|circle-blur"rectangle"Page reveal shape.
starttop-left|top-right|bottom-left|bottom-right|center|bottom-up"bottom-up"Reveal origin.
iconClassNamestring–Class shared by the sun, moon, and hydration placeholder.