Themes
Jazz is themed entirely through CSS custom properties — override the seed colors to match your brand.
Primary scale
Used for interactive elements like buttons and focus rings. The
palette is derived from --jazz-primary, which accepts a
light-dark() value for per-theme control.
Neutral scale
Used for text, borders, and backgrounds. Override
--jazz-neutral to adjust neutral tones.
Constructive scale
Used for success and positive states. Override
--jazz-constructive.
Destructive scale
Used for errors and danger states. Override
--jazz-destructive.
Color scales
General-purpose accent colors. Override
--jazz-color1 through --jazz-color6 to
suit your palette.
Customizing
Override seed colors on :root after importing the
stylesheet. Use light-dark() on
--jazz-primary for per-theme control:
:root {
/* Same primary for both themes */
--jazz-primary: #6366f1;
/* Or tune per-theme with light-dark() */
--jazz-primary: light-dark(#4f46e5, #818cf8);
--jazz-neutral: #6b7280;
}Dark mode
Jazz responds to
prefers-color-scheme: dark automatically. You can also
force a mode on any element using the color-scheme CSS
property:
<html style="color-scheme: light">
...
</html>
<html style="color-scheme: dark">
...
</html>