"use client"; import * as React from "react"; import { useTheme } from "next-themes"; import { flushSync } from "react-dom"; import { cn } from "@/lib/utils"; import "./theme-toggle.css"; interface ThemeToggleProps { /** Additional class names */ className?: string; } const ThemeToggle = ({ className }: ThemeToggleProps) => { const { setTheme, theme } = useTheme(); const ref = React.useRef(null); const [mounted, setMounted] = React.useState(false); React.useEffect(() => { setMounted(true); }, []); async function themeToggle() { if (!ref.current) return; // Fallback for browsers without View Transitions API if (!document.startViewTransition) { setTheme(theme === "dark" ? "light" : "dark"); return; } await document.startViewTransition(() => { flushSync(() => { setTheme(theme === "dark" ? "light" : "dark"); }); }).ready; const { top, left, width, height } = ref.current.getBoundingClientRect(); const right = window.innerWidth - left; const bottom = window.innerHeight - top; const maxRadius = Math.hypot(Math.max(right, left), Math.max(bottom, top)); document.documentElement.animate( { clipPath: [ `circle(0px at ${left + width / 2}px ${top + height / 2}px)`, `circle(${maxRadius}px at ${left + width / 2}px ${top + height / 2}px)`, ], }, { duration: 500, easing: "ease-in-out", pseudoElement: "::view-transition-new(root)", } ); } if (!mounted) { return ( ); } return ( ); }; const SunIcon = () => ( ); const MoonIcon = () => ( ); export default ThemeToggle;

Command Palette

Theme Toggle

Preview

Installation

Props