# Theme

Corsair colour, radius and base styles for light and dark mode. Every component relies on these variables; override --primary, --primary-foreground and --ring to apply your brand.

Docs: https://corsairui.vercel.app/docs/theme

## Install

```bash
pnpm dlx shadcn@latest add @corsair-ui/theme
```

## Styling

Restyle it in the project that installs it: `className` on each part, the theme variables, and these attributes with arbitrary variants (`[&_[data-slot=…]]:…`, `data-[state=…]:…`).

- The Themes page (/themes) builds these variables for another base, brand colour and radius, checks the contrast and gives the CSS to paste after the theme.
- Presets install the theme with a palette in one command: theme-blue, theme-violet, theme-rose, theme-emerald and theme-amber.

## Accessibility

- Foreground and background pairs are picked for contrast in both light and dark mode.
- Focus rings use --ring on every interactive component.

## Examples

On the docs page: Colours, Radius, Branding. The usage examples in the source comments below are the reference.