Buttons

Mode Toggle

Animated sun ⇄ moon light/dark toggle icon-button.

Import

tsx

import { ModeToggle } from "@cronus-ui/ui";

bash

npx cronus-ui add mode-toggle

Examples

Sun ⇄ moon morph

Fully controlled: the button reports the opposite mode via `onModeChange` while the sun scales into a crescent moon with pure CSS transitions (instant under reduced motion).

Current mode: light

tsx

const [mode, setMode] = useState<"light" | "dark">("light");

return <ModeToggle mode={mode} onModeChange={setMode} />;

Sizes

Two square footprints — `sm` for dense toolbars, `md` for headers.

tsx

const [mode, setMode] = useState<"light" | "dark">("dark");

return (
  <div className="flex items-center gap-3">
    <ModeToggle size="sm" mode={mode} onModeChange={setMode} />
    <ModeToggle size="md" mode={mode} onModeChange={setMode} />
  </div>
);

Wired to a theme provider

The component never touches the DOM root — hand it your provider's mode. This one is live: it drives the whole docs site through `useTheme` from `@cronus-ui/theme`.

tsx

const { mode, setMode } = useTheme();

return <ModeToggle mode={mode} onModeChange={setMode} />;

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component ModeToggleDefault layout:inline style:mode-toggle {
  aria-label:"Switch to dark mode"
  label "Switch to dark mode"
}

page "/audit/mode-toggle/default" type:custom {
  use ModeToggleDefault
}

API Reference

Generated from the component's exported types.

ModeToggleProps

Extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children">

Prop	Type	Default	Description
`mode`*	`ModeToggleMode`	—	The current color mode. The component is fully controlled — it never stores mode itself.
`onModeChange`*	`(next: ModeToggleMode) => void`	—	Called with the opposite mode when the button is activated (click, Enter or Space).
`size`	`ModeToggleSize`	`"md"`	Button footprint: `sm` (32px, 16px glyph) or `md` (36px, 20px glyph). Defaults to `md`.
`type`	`string`	—	Native type of the underlying element.
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`onClick`	`(event: MouseEvent) => void`	—	Click handler.
`className`	`string`	—	Additional class names merged onto the root.