Getting started

Customize

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

Without Tailwind

:root {
  --color-primary: #6366f1;
  --color-primary-content: #1e1b4b;
  --color-primary-surface-content: #3730a3;
  --color-secondary: #db2777;
  --color-secondary-content: #500724;
  --color-secondary-surface-content: #9d174d;
  --color-tertiary: #0d9488;
  --color-tertiary-content: #042f2e;
  --color-tertiary-surface-content: #115e59;
  --color-neutral: #737373;
  --color-neutral-content: #0a0a0a;
  --color-neutral-surface-content: #262626;
  --color-success: #16a34a;
  --color-success-content: #052e16;
  --color-success-surface-content: #166534;
  --color-warning: #d97706;
  --color-warning-content: #451a03;
  --color-warning-surface-content: #92400e;
  --color-error: #dc2626;
  --color-error-content: #450a0a;
  --color-error-surface-content: #991b1b;
  --color-info: #0284c7;
  --color-info-content: #082f49;
  --color-info-surface-content: #075985;

  --radius-surface: 1rem;
  --radius-field: 1rem;
  --radius-control: 999px;
  --radius-mark: 0.5rem;
  --material-opacity: 60%;
  --material-blur: 4px;
  --noise-size: 22.5rem;
  --elevation: 1;
}

With Tailwind

Put solids, content colors, and surface content colors in @theme. Jellyfy reads those names, and Tailwind makes them available to utilities such as bg-primary, text-primary-content, and text-primary-surface-content. Set radius, opacity, blur, grain, and elevation on :root. Tailwind already sets --spacing.

@theme {
  --color-primary: #6366f1;
  --color-secondary: #db2777;
  --color-tertiary: #0d9488;
  --color-neutral: #737373;
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-error: #dc2626;
  --color-info: #0284c7;

  --color-primary-content: #1e1b4b;
  --color-primary-surface-content: #3730a3;
  --color-secondary-content: #500724;
  --color-secondary-surface-content: #9d174d;
  --color-tertiary-content: #042f2e;
  --color-tertiary-surface-content: #115e59;
  --color-neutral-content: #0a0a0a;
  --color-neutral-surface-content: #262626;
  --color-success-content: #052e16;
  --color-success-surface-content: #166534;
  --color-warning-content: #451a03;
  --color-warning-surface-content: #92400e;
  --color-error-content: #450a0a;
  --color-error-surface-content: #991b1b;
  --color-info-content: #082f49;
  --color-info-surface-content: #075985;
}

:root {
  --radius-surface: 1rem;
  --radius-field: 1rem;
  --radius-control: 999px;
  --radius-mark: 0.5rem;
  --material-opacity: 60%;
  --material-blur: 4px;
  --noise-size: 22.5rem;
  --elevation: 1;
}

Each slot has three names. --color-primary is the solid. --color-primary-content is the text on a button or badge. --color-primary-surface-content is the text on a field, card, alert, or dialog panel. The same two suffixes exist for every slot, and the samples list them. The hexes are the light defaults. A single hex replaces the light and dark pair. Changing a solid does not change those text colors.
--radius-control is the pill on buttons, the switch, the range thumb, and badges. 999px keeps that corner fully round.
--radius-surface is the corner on 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.
--radius-field is the corner on inputs, textareas, and selects. --radius-mark is the checkbox. --material-opacity and --material-blur are the jelly. --elevation scales every drop shadow together.

Dark

Jellyfy follows the operating system. Primary is Indigo 500 in both themes. The other solids stay the ones you set. Surface text is the 800 step in light and the 200 step in dark. Control text is the 950 step in light and the 100 step in dark. Neutral is Neutral 500 in both themes.

To choose for the page, add the class dark on the root, or on any section. It forces the dark paper. The class light on the root keeps the light paper even when the system is dark.

<html class="dark">