Theme button

Switching theme: light, dark or whatever the operating system says. The three options, not two: a two-position switch does not let you go back to "whatever the system says" once touched, and that is what almost everyone has set.

When to use it

• In the header of the application or the store, with shape="cycle" (default): an icon button that goes from light to dark, to "system" and back to the start. withText puts the theme's name next to the icon.
• On the settings page, with shape="group": the three options in view.

When not to

• For any other yes or no: Switch.
• If the application has only one theme, it is not used.

Keyboard: in cycle mode, Tab reaches the button and Enter or Space move to the next theme. In group mode it is an option group: Tab enters the checked one and the arrows change theme.

Accessibility: the button's name says how it is and what it changes to: "Theme: light. Switch to dark". On changing, the theme and how it looks are announced ("Theme system, showing dark"). The new icon enters spinning only when the person changes it, not on load.

How it works: it writes data-theme on the <html> (or removes it, for "system") and saves the choice in localStorage (amset-theme). In this page it changes the theme of the entire preview, just like in an application.

Fine-tuning: no variables of its own. In cycle mode it is an IconButton (ghost by default, with variant, tone and size; --amset-button-*) with the classes amset-theme__button, amset-theme__icon and amset-theme__text; in group mode, a SegmentedGroup with the class amset-theme.