Theming
Customize the visual style with CSS variables after importing package styles.
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
import '@jazzmine-ui/react/styles';
import './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;
}