AppearanceToggle

Markdown

Lets people choose light, dark or the system setting.

Use it for: Letting people choose light, dark or system appearance.
Not for: Other settings; it is wired to the theme provider. Try ToggleGroup or Switch.

Current value: light

Loading example…

Installation

npm install @stackunseen/ui

import { AppearanceToggle } from '@stackunseen/ui';

Styles: @stackunseen/ui/styles.css

Usage and props

Pass the value to AITheme. useStoredAppearance keeps it in this browser and follows other tabs; appearanceInitScript applies it before paint through a root attribute your stylesheet reads. Until the page’s scripts load, the cycle button shows a neutral mark.

Supported inputs

This is the public signature used by this example. Open Code to see how the values and callbacks fit together.

value · onValueChange · variant?: cycle | segmented | switch | subtle · labels? · label? · size? · useStoredAppearance({ storageKey }) · useResolvedAppearance(value) · appearanceInitScript({ storageKey })

How state and callbacks work

All props

Loading…

For your coding agent

Give the agent this page instead of a screenshot. The prompt wraps the page with the install and import lines and the rule that your server, not a click, completes an action.

Contract: value · onValueChange · variant?: cycle | segmented | switch | subtle · labels? · label? · size? · useStoredAppearance({ storageKey }) · useResolvedAppearance(value) · appearanceInitScript({ storageKey })
Keeps honest: Pass the value to AITheme. useStoredAppearance keeps it in this browser and follows other tabs; appearanceInitScript applies it before paint through a root attribute your stylesheet reads. Until the page’s scripts load, the cycle button shows a neutral mark.
MCP: read_component "AppearanceToggle" on the docs endpoint

Open the Markdown file

Keyboard and customization

Keyboard

The cycle button names the current mode and what a press switches to. Switch and segmented are radiogroups (arrow keys move and select); subtle is one "Dark mode" button with a pressed state.

Customization

Change shared colors, spacing, corners and icons with the theme. Use the component's supported props to adapt its content and layout. Customization guide and Theme Studio

AppearanceToggle