# Theme Toggle (Moonarc) Cycles system → light → dark, and the page changes theme through a circle that grows from the click, on a same-document view transition. ThemeScript in stores the choice, applies it before paint and after every swap and exposes the API; ThemeToggle's own script only advances the choice and wraps the change (its storageKey prop is ThemeScript's). Without view transitions, or under reduced motion, the theme switches at once. Without ThemeScript, which includes a page without JavaScript, the toggle is hidden. The icon is AnimatedIcons (sun to moon). - Import: `import ThemeToggle from '@moonarc/core/ThemeToggle'` - Install: `npx astro add moonarc` · copy-paste: `npx shadcn@latest add https://moonarc.dev/r/theme-toggle.json` - Tier C · category ui · trigger click - Readout: `` - Browser support: newly (Chrome 111 · Firefox 144 · Safari 18); elsewhere: an instant switch - Measured cost: 1.0 kB raw JS · 613 B gzip · + runtime (with dependencies 2.7 kB raw; CSS 10.1 kB raw) - Page: https://moonarc.dev/components/theme-toggle/ ## Props | Prop | Type | Default | Description | |---|---|---|---| | `origin` | `'click' | 'center'` | `'click'` | Where the circle grows from. | | `choices` | `('system' | 'light' | 'dark')[]` | `['system', 'light', 'dark']` | The cycle; ["light", "dark"] for a two-state switch. A stored choice outside the cycle (system, for that switch) steps on from the theme it resolves to, so the first click always changes the page. | | `label` | `boolean` | `false` | Print the current choice next to the icon. | ## Usage ```astro --- // in the layout import ThemeScript from '@moonarc/core/ThemeScript'; import ThemeToggle from '@moonarc/core/ThemeToggle'; ---

``` ## Reduced motion No circle: the theme switches at once. The icon swap loses its rotation. ## With ClientRouter ThemeScript re-applies the attributes after every swap (the router replaces 's); the toggle rebinds through the shared runtime and re-syncs its label and icon. ## Craft - One contract, two halves: ThemeScript (inline, in , before paint) owns the attributes and the storage key; the toggle only calls set(). No flash on load, none on navigation. Without ThemeScript there is no data-theme-choice on , and the toggle is display: none rather than a dead button or a second, half-right owner. The same rule hides it when JavaScript is off. - The first frames are CSS: before the toggle's module has run, the label reads the choice from html[data-theme-choice] and the icon turns to the moon under html[data-theme="dark"], so a reader who chose dark never sees a sun and the word system flash first. - The circle is clip-path on ::view-transition-new(root) with the old snapshot held still. The new theme is revealed, not faded, so mid-transition both themes are crisp. - The radius is computed to the farthest corner, so the circle covers the viewport exactly when the transition ends, from any click point. - The attribute that selects the transition rules lives on only for the duration and outranks Curtain's :where() root rules, so a page can carry both. - Three choices: system is a choice, and a visitor who chose it should not be forced into a fixed theme by a click. ## Replaces - ThemeToggle (Skiper UI) - AnimatedThemeToggler (Magic UI) - theme toggle (shadcn) ## Source ```astro --- /** * ThemeToggle — cycles system → light → dark and the page changes theme * through a circle that grows from the click. The choice is stored under * ThemeScript's key; ThemeScript in is what applies it before paint * and after every swap and exposes window.__maTheme, so this script only * advances the choice, writes the origin on and wraps the change in * document.startViewTransition. Without ThemeScript, and so without * JavaScript, the toggle is hidden: it could only be a dead button. * Without view transitions, or under reduced motion, the theme switches * at once. The icon is AnimatedIcons (sun ↔ moon) reading data-on; until * the script has synced, the icon and the label follow ThemeScript's * attributes on , so the first frames already show the choice. */ import type { HTMLAttributes } from 'astro/types'; import AnimatedIcons from './AnimatedIcons.astro'; type Choice = 'system' | 'light' | 'dark'; interface Props extends HTMLAttributes<'button'> { /** Where the circle grows from. */ origin?: 'click' | 'center'; /** The cycle. */ choices?: Choice[]; /** Print the current choice next to the icon. */ label?: boolean; } const { origin = 'click', choices = ['system', 'light', 'dark'], label = false, class: className, ...rest } = Astro.props; --- ```