Theme Toggle

A button that switches between light and dark mode with a circular expand view-transition animation and cross-fading icon swap.

Installation

npx stepwise-ui add theme-toggle

Click the above icon to toggle theme

import { ThemeToggle } from '@/components/stepwise/theme-toggle'

export default function MyLayout({ children }) {
  return (
    <header className="flex items-center justify-between px-4 h-14">
      <Logo />
      <ThemeToggle />
    </header>
  )
}

Usage

import { ThemeToggle } from '@/components/stepwise/theme-toggle'

export default function MyLayout({ children }) {
  return (
    <header className="flex items-center justify-between px-4 h-14">
      <Logo />
      <ThemeToggle />
    </header>
  )
}

API

ThemeToggle

No props. Reads and writes theme state via useTheme() internally. Place it anywhere inside ThemeProvider.

useTheme()

NameTypeDescription

theme

"dark" | "light"

The current active theme.

toggle

(e: MouseEvent) => void

Switches theme and triggers the circular view-transition from the click origin.

ThemeProvider

Wrap your root layout with ThemeProvider to enable theme context. It reads localStorage on mount and syncs the dark class on <html>.