How theming works
The package uses CSS variables for theme values. Import @jazzmine-ui/react/styles first, then override variables globally.
Order matters
Define your overrides after the package stylesheet import so your values win in the final cascade.
Available CSS variables
| Variable | Controls |
|---|---|
| --jazzmine-primary | Primary accent color across interactive elements. |
| --jazzmine-primary-hover | Primary accent hover state color. |
| --jazzmine-bg | Main background surface tone. |
| --jazzmine-text-primary | Primary text color for key content. |
| --jazzmine-border-radius | Global corner radius used by component surfaces. |
| --jazzmine-sidebar-width | Sidebar width in the chat layout. |
Practical theme example
main.tsx
import '@jazzmine-ui/react/styles';
import './theme.css';theme.css
:root {
--jazzmine-primary: #3b82f6;
--jazzmine-primary-hover: #2563eb;
--jazzmine-bg: #f8fafc;
--jazzmine-text-primary: #0f172a;
--jazzmine-border-radius: 14px;
--jazzmine-sidebar-width: 300px;
}