Theme Toggle

Overview

Switch between a sun and crescent moon inside one circular button.

Optional pageTransition="circular" reveals the new page theme from the button while the icon morphs. Apply your theme class, data attribute, or synchronous React state inside onThemeChange; the component does not define colors or persist preferences. Without the option, only the icon animates. Unsupported browsers, reduced motion, hidden documents, and failed captures switch immediately. Resize or enabling reduced motion settles an active wipe; repeated activation keeps the latest choice. An iframe only animates its own document. Deferred provider updates and router transitions need app coordination; use pageTransition="none" until integrated. With a strict style CSP, pass an allowed nonce. The demo starts with the wipe enabled. Use the With wipe and Without wipe tabs to compare. On the website, the demo changes the entire site theme and stays synchronized with the header.

"use client";

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

// Your CSS must define light/dark colors for this attribute.
export function AppearanceToggle() {
  const [theme, setTheme] = useState<"light" | "dark">("light");
  return (
    <ThemeToggle
      theme={theme}
      pageTransition="circular"
      onThemeChange={(next) => {
        document.documentElement.dataset.theme = next;
        setTheme(next);
      }}
    />
  );
}

Props