BriteLightSwitch

Sharedcomponent✓ stamped

Purpose-built light/dark theme toggle — sun/moon thumb on the BriteSwitch dimensional system. Controlled; the consumer wires it to its own theme.

@brite-nites/design-system/primitives/brite-light-switch

A purpose-built light / dark theme toggle — its own component, a sibling of BriteSwitch (it shares BriteSwitch's dimensional system, but it's not a variant). The thumb shows a Sun in the light state that flips to a Moon in the dark state. Controlled + theme-agnostic: pass checked (is dark?) and onCheckedChange; each consuming app wires it to its own theme source.

Sizes

sm, md, lg. Default is md — the same dimensional system as BriteSwitch, so the two line up wherever they're mixed.

sm (16 tall)

md (20 tall) — default

lg (24 tall)

States

Light (off · Sun) / dark (on · Moon) / disabled. Flip any switch above — they share state — to watch the Sun↔Moon swap live.

light (off · Sun)

dark (on · Moon)

disabled, light

disabled, dark

Dark-mode glow

In the dark (on) state the rim becomes the light source: the track goes a brand-tinted near-black and light glows inward all the way around, the near-black thumb catches it, and the solid moon carries a shape-following bloom. Every hue is a design-system token, so the whole glow re-themes with the brand:

the on-state, shown at lg

--switch-on-track — the brand-tinted near-black the track becomes when on.
--switch-on-rim — the inward rim light, the moon, and the light caught on the thumb. Resolves to the brand ramp's luminous end (--brand-primary-7), falling back to --brand-primary where no ramp is defined.
--switch-on-inner — the broad inner glow reaching toward the center. The brand anchor (--brand-primary).

No brand color is hardcoded — the geometry scales per size and the hues come from these tokens, so imprinting a new brand re-themes the entire glow automatically.

Wiring

The switch is controlled and knows nothing about how a consumer manages its theme — that decoupling is what lets one shared switch serve every repo.

Pass checked (is the app in dark mode?) and onCheckedChange (the user asked to toggle).
Each app wires those to its own theme source — the sandbox to its SandboxThemeProvider, a storefront to next-themes, and so on.