Switch the visual identity with one attribute

At a glanceCopy Anchor Link

• Who: Teams that want to change the whole look of an app, or offer a choice, without touching components.
• What: data-identity on the root swaps the identity tokens next to light and dark; a head script applies the stored choice before first paint and a labelled switcher or touch picker lets people choose.
• Use when: To rebrand or offer several looks from one set of components.
• Avoid when: For a single fixed brand — edit the base tokens in styles.css instead.
• See also: Theme an admin app (dark/light included)

InstallCopy Anchor Link

pnpm add @zedtech/zedkit-ui

Latest: 0.4.0 (via changesets).

ExampleCopy Anchor Link

import { IdentityScript, IdentitySwitcher } from "@zedtech/zedkit-ui";
const looks = [{ id: "calm", label: "Calm" }, { id: "bold", label: "Bold" }];
// <head><IdentityScript ids={looks.map((l) => l.id)} /></head>
<IdentitySwitcher identities={looks} />

Wraps: none (CSS variables in identities.css)