Eclipse
The next appearance crosses the page like an eclipse.
import { ThemeSwitch, type Theme } from "@/forma/arc/theme-switch/theme-switch";Base
In FORMA
- Liegt in
kit/arc/theme-switch-eclipseund ist über@/forma/arc/theme-switch-eclipse/theme-switch-eclipseerreichbar. - 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
- Marketing or showcase pages where the theme change should feel like an event.
- Layouts where a directional sweep across the page reads naturally.
When not to use
- Use theme-switch-rise for everyday product chrome where a calmer change fits.
- Use theme-switch-split when the button sits in the center and direction should not matter.
Usage
import { ThemeSwitch } from "@/forma/arc/theme-switch/theme-switch";
<ThemeSwitch
theme={theme}
variant="eclipse"
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 eclipse sweep off for reduced motion and swap the theme directly.
Motion
- variant="eclipse": the next appearance crosses the page like an eclipse; run it in onThemeChange with a view transition.
- The icon shifts 2px left in dark mode to lean into the sweep.
- 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="eclipse". The prop only styles the icon nudge and is passed back to onThemeChange; the page animation is your code.
- Pick eclipse for a dramatic, directional change on marketing or showcase pages; rise suits product chrome better.
Guidance for AI tools
Eclipse: The next appearance crosses the page like an eclipse. 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
Komponente und Text: Arc UI (MIT, uiarc.dev), angepasst für FORMA.