@arshad-shah/cynosure-themes

Prebuilt theme stylesheets for Cynosure UI — drop-in imports that override the default tokens.

Each theme is a single CSS file that redefines Cynosure's design-token custom properties under a scoping selector. Import one at the root of your app and every component re-renders in that theme automatically.

See every theme applied to the component library, live: cynosure.arshadshah.com

Install

pnpm add @arshad-shah/cynosure-themes

Requires @arshad-shah/cynosure-tokens already loaded — the themes override tokens, they don't replace them.

Usage

Pick a theme and import its stylesheet. Order matters: themes must load after the base tokens so their overrides win the cascade.

import '@arshad-shah/cynosure-tokens/css';
import '@arshad-shah/cynosure-tokens/css/dark';
import '@arshad-shah/cynosure-themes/terminal';        // or…
import '@arshad-shah/cynosure-themes/high-contrast';

By default, the theme applies globally. Scope it to a subtree by setting data-theme on a wrapper element:

<div data-theme="terminal">
  <Dashboard />
</div>

Available themes

terminal

import '@arshad-shah/cynosure-themes/terminal';

JetBrains Mono everywhere, phosphor-green accents on near-black surfaces. Designed for IDE- and CLI-adjacent UIs.

high-contrast

import '@arshad-shah/cynosure-themes/high-contrast';

WCAG AAA contrast across every component, black-and-white with single-hue accents. For users who enable prefers-contrast: more or who ship in accessibility-critical environments.

Rolling your own

A "theme" in Cynosure is just a CSS file that overrides token custom properties. To author one, copy the scaffold under src/terminal/ or src/high-contrast/ in the main repo and change the token values. See the custom-themes guide.

Links

• Storybook — see themes applied live
• Main repo
• Theming overview
• Terminal theme recipe
• Changelog

License

MIT © Arshad Shah