SettingsMenu
A round button that opens a small panel with the theme, as Light, Dark or System, and a Reduce motion switch. A choice applies at once and is remembered.
When to use
Section titled “When to use”Once, at the right end of the nav. It replaces ThemeToggle on a site that also wants System and Reduce motion.
On a page
Section titled “On a page”<head> <ThemeScript storageKey="theme-preference" motionKey="reduce-motion" /></head><TopNav …> <SettingsMenu slot="actions" storageKey="theme-preference" motionKey="reduce-motion" /></TopNav>SegmentedControl and Switch work on their own too. Both send ds-change with the new value, and take a value without an event: select(value) and the checked property.
Anatomy
Section titled “Anatomy”A 36px IconButton with the adjustments icon. Its panel is 280px wide on the canvas with a hairline and --shadow-float, under the button with its right edge at the button’s, kept inside the window. In it: an uppercase “Theme” label, the SegmentedControl, a soft hairline, then the Switch with a line of description.
SegmentedControl is a track on the cream card; the chosen option is raised to the canvas with a hairline. Switch is a 44 by 24 track, coral when on, with a canvas knob that slides over --motion-base.
Variants
Section titled “Variants”| Prop | Values |
|---|---|
storageKey, motionKey |
The localStorage keys; ThemeScript must read the same ones |
label |
The button’s and panel’s name, “Display settings” |
size (SegmentedControl) |
md (default) or sm |
tone |
cream or canvas (default), or dark |
description, disabled (Switch) |
A line under the label; a switch that cannot be changed |
States
Section titled “States”| State | What changes |
|---|---|
| System | The page follows the OS, including a change while it is open; nothing is stored |
| Reduce motion on | data-reduce-motion="true" on <html>: transitions and animations finish at once, page transitions stop |
| OS asks for reduced motion | The switch shows on and cannot be turned off here |
Accessibility
Section titled “Accessibility”The panel is a native popover named “Display settings”: a click outside or Escape closes it, and the button’s aria-expanded follows it. SegmentedControl is a radio group, not tabs, since choosing sets a value rather than showing a panel; the arrow keys move the choice and the focus. Switch is a role="switch" button inside its label.
SettingsMenu.astro, SegmentedControl.astro and Switch.astro. SegmentedControl and Switch are ported from the handoff, which has no settings panel; this one puts them in a popover the size of its DropdownMenu.