ThemeToggle

A controlled button for switching between light and dark themes. Animates between sun and moon icons with a crossfade, and respects prefers-reduced-motion.

Import

import { ThemeToggle } from "chunks-ui";

Basic Usage

ThemeToggle is fully controlled — pass the current theme and an onClick handler to toggle it:

function App() {
  const [theme, setTheme] = useState<"light" | "dark">("light");
 
  return (
    <ThemeToggle
      theme={theme}
      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
    />
  );
}

Custom Icons

Replace the default sun/moon icons via lightIcon and darkIcon:

<ThemeToggle
  theme={theme}
  onClick={() => setTheme(theme === "light" ? "dark" : "light")}
  lightIcon={<SunIcon />}
  darkIcon={<MoonIcon />}
/>

With a Tooltip

ThemeToggle forwards its ref and props to the <button>, so it works as a Tooltip.Trigger render target:

<Tooltip.Root>
  <Tooltip.Trigger
    render={<ThemeToggle theme={theme} onClick={() => setTheme(theme === "light" ? "dark" : "light")} />}
  />
  <Tooltip.Portal>
    <Tooltip.Positioner>
      <Tooltip.Popup>Toggle theme</Tooltip.Popup>
    </Tooltip.Positioner>
  </Tooltip.Portal>
</Tooltip.Root>

Props

All other <button> props, including ref, are forwarded to the underlying <button> element. Pass aria-label to replace the default name (“Switch to dark mode” / “Switch to light mode”) in both themes, or labels to replace each one.

Labels

labels replaces the built-in English text, for example to translate it. Keys you leave out keep their default from DEFAULT_THEME_TOGGLE_LABELS. aria-label takes precedence. See Labels.