Interface: OcTheme

The OrangeCheck theme (skin) registry.

A skin is the named-theme axis, orthogonal to the light/dark mode axis (which stays owned by next-themes via the .dark class). A skin is applied as data-oc-theme="<id>" on <html> and persisted in the oc_skin cookie at Domain=.ochk.io so a choice on one family site carries to every other.

Adding a skin = add a themes/<id>.css token block in this package and a row here. Every site picks it up on the next @orangecheck/design bump; no per-site edits.

Properties

Property	Modifier	Type	Description	Defined in
<a id="property-accent"></a> `accent`	`readonly`	`string`	Accent hex (sRGB of the skin's dark-mode `--brand`). Used to swap the browser chrome — `<meta name="theme-color">` and the favicon (recolored from the family `#f97316`) — when the skin changes. Mirrors the `SKINS` palette in `oc-media-kit/build/brands.py` (same source of truth).	tokens/themes.ts:26
<a id="property-description"></a> `description`	`readonly`	`string`	One-line description shown in the picker / Storybook.	tokens/themes.ts:19
<a id="property-id"></a> `id`	`readonly`	`string`	Stable id — also the `data-oc-theme` attribute value and the CSS file stem.	tokens/themes.ts:15
<a id="property-label"></a> `label`	`readonly`	`string`	Human label for the picker (lowercase, house voice).	tokens/themes.ts:17