Display Controls
The two viewing controls that sit beside the account menu in AppShell's header: text size and colour scheme. They are buttons rather than menu entries because both are one-click switches a reader reaches for while reading — burying a switch behind a menu costs two clicks to see the effect of one. Each shows the state it is in rather than the action it will take: the glyph grows with the text scale and takes the current-page tint once the scale is off its default, and the scheme button shows the scheme you are in. The scheme starts wherever the browser says and the first click pins it, so the app follows the OS until the reader disagrees with it.
The two viewing controls
Text size and colour scheme, as buttons rather than menu entries: both are one-click switches a reader reaches for *while* reading, and burying one behind a menu costs two clicks to see the effect of one. Each shows the state it is in rather than the action it will take — the glyph grows with the scale, and the scheme button shows the scheme you are in. These are live: they change this page.
<DisplayControls {theme} {textScale} />One or the other
Omit a controller and its button disappears. A surface with no text of its own to scale can take the scheme switch alone.
<DisplayControls {theme} />
<DisplayControls {textScale} />API
| Prop | Type | Default | Description |
|---|---|---|---|
theme | {resolved: 'light'|'dark', toggle: () => void} | Theme controller. Omit to hide the colour-scheme button. | |
textScale | {level: number, steps: number, next: () => void} | Text-scale controller, cycling back to the default past its last step. Omit to hide the text-size button. |