ThemeToggle

Toggles between light and dark mode. Reads OS preference on first visit, persists the choice in localStorage. Powered by the global Alpine.store('theme') — all instances on a page stay in sync.

Variants

Icon (default)

Pill (icon + label)

Mode Preview

Both surfaces shown simultaneously using inline CSS variable overrides — so you can see light and dark clay behaviour without toggling.

☀️ Light mode

Clay Card

Warm amber-tinted claymorphism surface with brand glow shadow.

Brand Neutral

clay-inset input surface

🌙 Dark mode

Clay Card

Deep warm-dark surface — amber ember inner glow, black outer shadow.

Brand Neutral

clay-inset input surface

Usage

Included automatically in every page via layouts.Base (floating, bottom-right). Use inline for navbars or toolbars:

@actions.ThemeToggle(actions.ThemeToggleProps{
    Variant: "pill", // "" (icon only) | "pill" (icon + label)
    Size:    "sm",   // "sm" | "md" | "lg"
})