Theme Toggles

Both components can manage local visual state or connect to the same controlled theme source used by the rest of the interface.

Installation

pnpm dlx shadcn@4.16.1 add @siteplane/theme-toggles

Sun and Moon Morph

SunMoonMorphToggle uses one masked shape, so the moon naturally resolves into the sun instead of swapping two separate icons.

"use client";

import { SunMoonMorphToggle } from "@/components/ui/theme-toggles";

export function Example() {
  return <SunMoonMorphToggle />;
}

Layered Icon Morph

LayeredThemeToggle layers familiar moon and sun icons, then rotates and scales them through the same pressed state.

"use client";

import { LayeredThemeToggle } from "@/components/ui/theme-toggles";

export function Example() {
  return <LayeredThemeToggle />;
}

Theme State

Pass checked and onCheckedChange from your theme provider. The control should reflect the application theme rather than maintaining a second independent state.

Sizing

Both controls inherit sm, default, lg, or xl from SiteplaneUIProvider. Pass size directly when a header or toolbar needs a local override.

Accessibility

Keep a stable accessible name such as “Toggle theme” and preserve the native checkbox state. The icons are decorative, and reduced-motion users receive the same immediate state change without the rotation or scale transition.