Rise

The next appearance rises into place.

import { ThemeSwitch, type Theme } from "@/forma/arc/theme-switch/theme-switch";

Base

In FORMA

Liegt in kit/arc/theme-switch-rise und ist über @/forma/arc/theme-switch-rise/theme-switch-rise erreichbar.
Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.

When to use

Product chrome and dashboards where the theme change should be calm.
Icon-only toggles in a top bar, as the library's own header uses it.

When not to use

Use theme-switch-eclipse for a dramatic change on a showcase page.
Use user-menu when theme belongs with account settings.

Usage

import { ThemeSwitch } from "@/forma/arc/theme-switch/theme-switch";

<ThemeSwitch
  theme={theme}
  variant="rise"
  iconOnly
  onThemeChange={(next, variant, trigger) => runThemeTransition(next, variant, trigger)}
/>

API reference

ThemeSwitch

A secondary Button that swaps a sun and moon icon and reports the next theme. The page transition itself is yours to run.

Prop	Type	Default	Description
`theme` (required)	`"light" \| "dark"`	–	The current theme. Drives the icon and aria-pressed.
`onThemeChange` (required)	`(next: Theme, variant: ThemeSwitchVariant, trigger: HTMLElement) => void`	–	Called on press with the opposite theme, the variant, and the button, so the page transition can start from it.
`variant`	`"reveal" \| "eclipse" \| "split" \| "rise"`	`"reveal"`	Names the page transition and sets the small icon nudge that matches it.
`label`	`string`	–	Accessible name. Defaults to "Switch to dark mode" or "Switch to light mode".
`iconOnly`	`boolean`	`false`	Hides the "Switch theme" text and renders a 38px square button.

Keyboard interactions

Keys	Action
Enter / Space	Toggles the theme.

Accessibility

Same button as theme-switch: aria-pressed reflects dark mode and the label names the next theme.
Keep the rise off for reduced motion and swap the theme directly.

Motion

variant="rise": the next appearance rises into place from the bottom; run it in onThemeChange with a view transition.
The icon lifts 2px in dark mode.
Reduced motion removes the nudge and swaps the icon with a fade.

Responsive behavior

The labelled button fits a desktop top bar; pass iconOnly for a fixed 38px square on narrow headers and mobile.
Hover styles apply only on hover-capable fine pointers, so touch taps do not leave a stuck hover state.

Performance

The button itself is tiny: one icon swap on a spring, and the first theme after hydration applies without animating.
The page transition is yours; a full-page view transition snapshots the whole document, so keep it short and skip it for reduced motion.

Notes for AI

Select with variant="rise". The prop only styles the icon nudge and is passed back to onThemeChange; the page animation is your code.
The calmest of the four; the library's own top bar uses it with iconOnly.

Guidance for AI tools

Rise: The next appearance rises into place. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt

ZurückSplit WeiterAvatar

Komponente und Text: Arc UI (MIT, uiarc.dev), angepasst für FORMA.