Brand

Theme toggler

Switches between light and dark with a circular reveal from the button, using the View Transitions API where the browser has it.

packages/design-system/components/theme-toggler-2.tsx

Examples

Stock: an unstyled button with the icon. Click it
As the footer sets it, in the f-p-xs link style

Anatomy

  1. 01Button with an aria-label
  2. 02Sun in dark mode, moon in light
  3. 03Clip-path reveal on ::view-transition-new(root)

Usage

import { AnimatedThemeToggler } from "@repo/design-system/components/theme-toggler-2";

<AnimatedThemeToggler className="f-p-xs hover:text-brand" />

Props

PropTypeDefaultDescription
classNamestringnoneOn the button, or on the icon when asChild is set.
asChildbooleanfalseRenders only the icon, for when the parent is already the button. The click handler is then the parent's job.

Guidance

Do

  • Keep one on the page, in the footer.

Don't

  • Put it inside the design system's pages to judge specimens; they stay light on purpose.

Where it's used