ExperimentalmoleculeInputs

ThemeSwitch

The Appearance setting: Light, Dark or System, for every Bridge app.

import { … } from "@brdgapp/ui/components/theme-switch"

Usage

ThemeSwitch is the Appearance setting: Light, Dark or System. It saves the choice for every Bridge app and applies it at once, with no fade. It's built on SegmentedControl and the package's theme (useTheme and themeScript). The usual mistake is putting a theme button in an app's top bar: it belongs in Settings.

When to use

The Appearance row in an app's Settings.

When not to use

In the top bar or a menu. Appearance is a setting people change rarely.
To pick between other options. Use SegmentedControl instead.

The look comes from props

A component's appearance comes only from its own options (variant, size, color). className on a package component is for layout (mt-4, shrink-0, w-full), never for font size, color, padding, radius or hover. If the look needs a className, the component or the chosen option is wrong: fix that instead.

Anatomy

Options. Light (sun), Dark (moon), System (screen), each with its word.
Selected. The current choice, raised on a white chip.

Examples

In Settings

The Appearance row. Try it: this whole site changes, and so would every Bridge app.

Appearance

Applies in every Bridge app.

States

State	What happens
Before the page loads	Shows System until the saved choice is read, a moment later.
System	Follows the device, and changes when the device does.

Behavior

Saves to a cookie for all of brdg.app, so every Bridge app follows. On localhost and previews, just that site.
Applies at once: transitions are switched off for one frame so nothing fades.
Needs themeScript in the app's root layout.

Do and don't

Put it in Settings → Appearance with a label.

Don't

Add a sun-and-moon button to the top bar.

Content

The row's label is “Appearance”. The options are Light, Dark and System.

Accessibility

A group named “Appearance”; arrow keys move between options.
Each option has its word, not just an icon.

Keys	Action
`Tab`	Moves to the selected option.
`←→`	Moves between options.
`EnterSpace`	Picks the option.

API reference