Getting started

Customize

Set only the names you want to change. The hexes below are the defaults.

Without Tailwind

:root {
  --color-primary: #4f46e5;
  --color-secondary: #db2777;
  --color-tertiary: #0d9488;
  --color-neutral: #a3a3a3;
  --color-success: #16a34a;
  --color-error: #dc2626;
  --color-warning: #d97706;
  --color-info: #0284c7;

  --radius-control: 999px;
  --radius-surface: 1rem;
  --noise-size: 22.5rem;

  --spacing: 0.25rem;
}

With Tailwind

Put the eight solids in @theme. That is Tailwind’s token list, and Jellyfy reads those names. Radius and grain are set on :root in the stylesheet. A @theme value sits in Tailwind's theme layer, and that :root rule wins, so a change to those three goes on :root as well. Tailwind already sets --spacing.

@theme {
  --color-primary: #4f46e5;
  --color-secondary: #db2777;
  --color-tertiary: #0d9488;
  --color-neutral: #a3a3a3;
  --color-success: #16a34a;
  --color-error: #dc2626;
  --color-warning: #d97706;
  --color-info: #0284c7;
}

:root {
  --radius-control: 999px;
  --radius-surface: 1rem;
  --noise-size: 22.5rem;
}

• The eight --color-* names are the solids. A button, a field, and a badge in primary all read --color-primary.
• --radius-control is the pill on buttons, the switch, the slider handle, and badges. 999px keeps that corner fully round.
• --radius-surface is the corner on fields, cards, alerts, and the dialog panel.
• --noise-size is how large the grain tiles. It is in rem so the grain scales with the root font.
• --spacing is optional. Tailwind already sets it. Without Tailwind, leave it unset and the sizes use 0.25rem.